contextmenu事件

在我的js学习笔记里面，写过跨浏览器的事件处理程序和跨浏览器的事件对象，使用它们处理事件封装的方法，今天写一下HTML5中的contextmenu事件。

 

                
菜单一
                
菜单二
                
菜单三
            

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事件处理程序，以便用户能够通过鼠标单击来隐藏菜单（单击也是隐藏所有系统上下文菜单的默认操作）。