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

百恒网络

南昌百恒网络

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

百恒网络 2016-12-27 5701

关于contextmenu 事件, Windows 95在 PC中引入了上下文菜单的概念,即通过单击鼠标右键可以调出上下文菜单。不久, 这个概念也被引入了 Web 领域。为了实现上下文菜单,开发人员面临的主要问题是如何确定应该显示上下文菜单(在 Windows 中,是右键单击;在 Mac 中,是 Ctrl+单击),以及如何屏蔽与该操作关联的 默认上下文菜单。为解决这个问题,就出现了 contextmenu 这个事件,用以表示何时应该显示上下文菜单,以便开发人员取消默认的上下文菜单而提供自定义的菜单。 
       由于 contextmenu 事件是冒泡的,因此可以为 document 指定一个事件处理程序,用以处理页面中发生的所有此类事件。这个事件的目标是发生用户操作的元素。在所有浏览器中都可以取消这个事件: 在兼容 DOM的浏览器中,使用 event.preventDefalut();在 IE中,将 event.returnValue 的值设置为 false。南昌网站建设公司百恒网络前端开发工程告诉大家原因,原因是contextmenu 事件属于鼠标事件,所以其事件对象中包含与光标位置有关的所有属性。通常使用 contextmenu 事件来显示自定义的上下文菜单,而使用 onclick 事件处理程序来隐藏该菜单。以下面的 HTML页面为例。
       


        ContextMenu Event Example
       


       

Right click or Ctrl+click me to get a custom context menu. Click anywhere else to get the default context menu.

               


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

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

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