HTML5-常见的事件- contextmenu 事件

　　主要控制应该何时显示上下文菜单，以便开发人员取消默认的上下文菜单而提供自定义的菜单

　　<1>　　由于该事件是冒泡的，因此可以为document 指定一个事件处理程序，用以处理页面中发生的所有此类事件。

　　　　　　

    EventUtil.addHandler(document,"contextmenu",function(event){
        console.log("收到"); //收到
    })
    EventUtil.addHandler(document.body,"contextmenu",function(event){
        console.log("冒泡？");//冒泡？
    });

　　<2>　　在兼容DOM的浏览器中，使用event.preventDefault();在IE中，将event.returnValue的值设置为false。  IE、chrome、Frifox、Opera、Safari

　　　　

 　　EventUtil.addHandler(document,"contextmenu",function(event){
        console.log("收到");
    })
    EventUtil.addHandler(document.body,"contextmenu",function(event){
        event.preventDefault()?event.preventDefault():event.returnValue=false;
    });

　　<3>　　因为contextmenu 事件属于鼠标事件，所以其事件对象中包含于光标位置有关的所有属性。

　　　

　　 EventUtil.addHandler(document.body,"contextmenu",function(event){
        var event = EventUtil.getEvent(event);
        event.preventDefault()?event.preventDefault():event.returnValue=false;
        console.log("   x 坐标："+event.clientX+" y坐标："+event.clientY); // 200 300
        console.log(EventUtil.getTarget(event));//body \ li \  ul
    });

　　<4>　　一般常用 contextmenu来显示菜单，onclick 事件处理程序来隐藏该菜单。

<style>
        .hidden{
            visibility: hidden;
            position: absolute;
        }
</style>

<body style="height:1500px;">
    <ul id="menu">
        <li>123</li>
        <li>234</li>
        <li>567</li>
    </ul>
</body>

EventUtil.addHandler(window,"load",function(event){
        var ul = document.getElementById("menu");
        ul.className = "hidden";
        EventUtil.addHandler(document,"contextmenu",function(event){
            event = EventUtil.getEvent(event);
            EventUtil.preventDefault(event);
            var menu = document.getElementById("menu");
            menu.top = event.clientY;
　　　　　　　menu.left = event.clientX;
            menu.style.visibility = "visible";
        });
        EventUtil.addHandler(document,"click",function(){
            document.getElementById("menu").style.visibility ="hidden";
        });
    });

主要是对document对象添加了一个contextmenu事件，以及给文档对象添加click事件进行隐藏; 这里并不是没有问题的？

当文档出现滚动条时候，菜单位置似乎和想象中有偏差？   其实不管在那种情况下，只要能够获取鼠标的坐标，而坐标信息可以通过事件对象进行取得？

从前面讲到的 几个位置属性：  clientX 、clientY、 pageX、pageY   前两者相对的视口的位置， 后两者相对文档的位置 scorllTop 、scrollLeft  滚动条距离顶部 、 左边的距离

由于浏览器的差异，在IE8以及下面的版本对pageX、pageY不能正确获取？先给大家上个图吧

针对EventUtil进行了扩展

     　　getScrollTop:function() {
            if (document.compatMode == "CSS1Compat") {
                return document.documentElement.scrollTop;
            } else {
                return document.body.scrollTop;
            }
        },
        getScrollLeft:function(){
            if(document.compatMode=="CSS1Compat"){
                return document.documentElement.scrollLeft;
            }else{
                return document.body.scrollLeft;
            }
        }

主要配合clientX 以及 clientY菜单位置的正确显示。

EventUtil.addHandler(window,"load",function(event){
        var ul = document.getElementById("menu");
        ul.className = "hidden";
        EventUtil.addHandler(document,"contextmenu",function(event){
            event = EventUtil.getEvent(event);
            EventUtil.preventDefault(event);
            var menu = document.getElementById("menu");
            var top =  EventUtil.getScrollTop();
            var left = EventUtil.getScrollLeft();
            menu.style.left = event.clientX + left;
            menu.style.top = event.clientY + top;
            menu.style.visibility = "visible";
        });
        EventUtil.addHandler(document,"click",function(){
            document.getElementById("menu").style.visibility ="hidden";
        });
    });

那还有另外种方式推荐

EventUtil.addHandler(window,"load",function(event){
        var ul = document.getElementById("menu");
        ul.className = "hidden";
        EventUtil.addHandler(document,"contextmenu",function(event){
            event = EventUtil.getEvent(event);
            EventUtil.preventDefault(event);
            var menu = document.getElementById("menu");
            var top =  EventUtil.getScrollTop();
            var left = EventUtil.getScrollLeft();
            menu.style.left = event.pageX?event.pageX:event.clientX + left;
            menu.style.top = event.pageY?event.pageY:event.clientY + top;
            menu.style.visibility = "visible";
        });
        EventUtil.addHandler(document,"click",function(){
            document.getElementById("menu").style.visibility ="hidden";
        });
    });

支持contextmenu 事件的浏览器有IE、Firefox、Safari、Chrome、Opera 11+