十年专注于品牌网站建设 十年专注于品牌网站建设,低调、有情怀的网络应用服务商!
南昌百恒网络微信公众号 扫一扫关注
小程序
tel-icon全国服务热线:400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络微信小程序

百恒网络

南昌百恒网络

contextmenu事件在H5中应方法及实例

百恒网络 2016-12-27 1013

关于contextmenu 事件, Windows 95在 PC中引入了上下文菜单的概念,即通过单击鼠标右键可以调出上下文菜单。不久, 这个概念也被引入了 Web 领域。为了实现上下文菜单,开发人员面临的主要问题是如何确定应该显示上下文菜单(在 Windows 中,是右键单击;在 Mac 中,是 Ctrl+单击),以及如何屏蔽与该操作关联的 默认上下文菜单。为解决这个问题,就出现了 contextmenu 这个事件,用以表示何时应该显示上下文菜单,以便开发人员取消默认的上下文菜单而提供自定义的菜单。 
       由于 contextmenu 事件是冒泡的,因此可以为 document 指定一个事件处理程序,用以处理页面中发生的所有此类事件。这个事件的目标是发生用户操作的元素。在所有浏览器中都可以取消这个事件: 在兼容 DOM的浏览器中,使用 event.preventDefalut();在 IE中,将 event.returnValue 的值设置为 false。南昌网站建设公司百恒网络前端开发工程告诉大家原因,原因是contextmenu 事件属于鼠标事件,所以其事件对象中包含与光标位置有关的所有属性。通常使用 contextmenu 事件来显示自定义的上下文菜单,而使用 onclick 事件处理程序来隐藏该菜单。以下面的 HTML页面为例。
       <!DOCTYPE html>
<html>
<head>
        <title>ContextMenu Event Example</title>
        <script type="text/javascript" src="EventUtil.js"></script>
</head>
<body>
        <div id="myDiv">Right click or Ctrl+click me to get a custom context menu. Click anywhere else to get the default context menu.</div>
                <ul id="myMenu" style="position:absolute;visibility:hidden;background-color:silver">
                        <li><a href="http://www.jxbh.cn">Baiheng' site</a></li>
                        <li><a href="http://www.nczwz.com"BaiHeng' site too</a></li>
                        <li><a href="http://www.le98.com">Le98</a></li>
                </ul>
</body>
</html>
       这里的<div>元素包含一个自定义的上下文菜单。其中,<ul>元素作为自定义上下文菜单,并且在 初始时是隐藏的。实现这个例子的 JavaScript代码如下所示。
        EventUtil.addHandler(window, "load", function(event){
        var div = document.getElementById("myDiv");

                EventUtil.addHandler(div, "contextmenu", function(event){
                event = EventUtil.getEvent(event);
                EventUtil.preventDefault(event);

                var menu = document.getElementById("myMenu");
                menu.style.left = event.clientX + "px";
                menu.style.top = event.clientY + "px";
                menu.style.visibility = "visible";
                });

        EventUtil.addHandler(document, "click", function(event){
                document.getElementById("myMenu").style.visibility = "hidden";
               });
        });
        在这个例子中,我们为<div>元素添加了 oncontextmenu 事件的处理程序。这个事件处理程序首 先会取消默认行为,以保证不显示浏览器默认的上下文菜单。然后,再根据 event 对象 clientX 和 clientY 属性的值,来确定放置<ul>元素的位置。后一步就是通过将 visibility 属性设置为 "visible"来显示自定义上下文菜单。另外,还为 document 添加了一个 onclick 事件处理程序,以 便用户能够通过鼠标单击来隐藏菜单(单击也是隐藏系统上下文菜单的默认操作)。
        虽然这个例子很简单,但它却展示了 Web 上所有自定义上下文菜单的基本结构。只需为这个例子 中的上下文菜单添加一些 CSS样式,就可以得到非常棒的效果。 
       支持 contextmenu 事件的浏览器有 IE、Firefox、Safari、Chrome和 Opera 11+。
        
  本文仅限内部技术人员学习交流,不得作于其他商业用途.希望此文对广大技人员有所帮助。原创文章出自:南昌网站建设公司-百恒网络http://www.jxbh.cn/如转载请注明出处!

400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络小程序

欢迎您的光顾,我们将竭诚为您服务×

售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售后服务 售后服务
 
售后服务 售后服务
 
备案专线 备案专线
 
×