contextmenu事件在H5中应方法及实例
发布时间：2022/01/11 丨 文章来源：未知 丨 浏览次数：
关于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.huicuiwang.cn/如转载请注明出处!
PS：所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！
