在我的js学习笔记里面,写过跨浏览器的事件处理程序和跨浏览器的事件对象,使用它们处理事件封装的方法,今天写一下HTML5中的contextmenu事件。
<ul id="myMenu" style="position: absolute; visibility: hidden;background-color: silver;">
<li>菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
</ul>
EventUtil.addHandler(window,"load", function (event) {
// var div = document.getElementById("btn");
EventUtil.addHandler(document,"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";
})
});
ul作为自定义上下文菜单,初始是隐藏的。
在这个例子中为document添加了一个contextmenu事件,这个事件处理程序首先会取消默认行为,以保证不显示浏览器默认的上下文菜单。然后,再根据event对象clientX和clientY属性的值,来确定防止ul元素的位置。最后一步就是通过将visibility属性设置为visible来显示自定义上下文菜单。灵位,还为document添加了一个onclick事件处理程序,以便用户能够通过鼠标单击来隐藏菜单(单击也是隐藏所有系统上下文菜单的默认操作)。