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