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

　　<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+

　　

HTML5-常见的事件- contextmenu 事件的更多相关文章

  1. HTML5事件——contextmenu 隐藏鼠标右键菜单

    在window中单击右键或在Mac中Ctrl+单击时会触发contextmenu事件,通过取消其默认动作能够提供自己定义菜单. 首先先写一个自己的菜单: <style> ul, li { ...

  2. 移动端前端常见的触摸相关事件touch、tap、swipe等整理

    前端的很多事件在PC端和浏览器端可公用,但有些事件却只在移动端产生,如触摸相关的事件 本文整理了移动端常见的一些事件,包括原生支持的click.touch.tap.swipe事件,也有定义型的gest ...

  3. HTML5学习(十一)---服务器发送事件

    参考教程:http://www.w3school.com.cn/html5/html_5_serversentevents.asp HTML5 服务器发送事件(server-sent event)允许 ...

  4. 移动端前端常见的触摸相关事件touch、tap、swipe

    前端的很多事件在PC端和浏览器端可公用,但有些事件却只在移动端产生,如触摸相关的事件 本文整理了移动端常见的一些事件,包括原生支持的click.touch.tap.swipe事件,也有定义型的gest ...

  5. [JavaScript] JavaScript事件注册,事件委托,冒泡,捕获,事件流

    面试题 event 事件 事件委托是什么? 如何阻止事件冒泡,阻止默认事件呢? Javascript 的事件流模型都有什么? 事件绑定和普通事件有什么区别? Event 对象 Event 对象,当事件 ...

  6. HTML5常见的面试题，基础知识点

                                                                                    HTML5常见的面试题 一.HTML 常 ...

  7. 三言两语之js事件、事件流以及target、currentTarget、this那些事

    厉害了我的哥--你是如此简单我却将你给遗忘   放假前再看某文档,里边提到两个我既熟悉又陌生的概念target.currentTarget,说他熟悉我曾经看到过这两个事件对象的异同处,说他陌生吧?很不 ...

  8. jQuery--事件, 事件绑定, 阻止事件冒泡, 事件委托,页面载入后函数

    1.常用事件, 按住shift键实现同步选择效果,搜索框联想效果 2.阻止事件冒泡 3.事件委托 4.使用 $(document).ready(function (){...}) 实现文件加载完绑定事 ...

  9. jQuery:自学笔记(4)——事件与事件对象

    jQuery:自学笔记(4)——事件与事件对象 jQuery中的事件 什么是事件 所谓事件,就是被对象识别的操作,即操作对象队环境变化的感知和反应,例如单击按钮或者敲击键盘上的按键. 所谓事件流,是指 ...

随机推荐

  1. （转）Javascript面向对象编程（二）：构造函数的继承（作者：阮一峰）

    对象之间的"继承"的五种方法. 比如,现在有一个"动物"对象的构造函数. function Animal(){ this.species = "动物& ...

  2. C#中DataTable转化JSON

    [WebMethod(Description = "将一个DataTable对象转化成JSON")] public string GetJSON() { JavaScriptSer ...

  3. oracle启动，提示“LRM-00109: could not open parameter file”

    转载自   http://blog.sina.com.cn/s/blog_53e731b70101liku.html oracle启动,提示“LRM-00109: could not open par ...

  4. js字符串数字计算

    1.字符串转换为数字用 -0 var a=1; var b='2'; var c= a+b;(12) var c=a+(b-0);(3)

  5. photoSlider-html5原生js移动开发轮播图-相册滑动插件

    简单的移动端图片滑动切换浏览插件 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" hre ...

  6. python安装包问题小结

    你可能遇到的问题包括:ImportError: No module named sklearn 未安装sklearn包ImportError: DLL load failed: 找不到指定的模块Imp ...

  7. jquery实现导航栏头部点击变换颜色

    实现效果如下: 话不多说直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  8. HDFS配置文件内容解释

    配置概述 hadoop-env.sh 一个可由hadoop脚本调用的bourne shell文件,它制定hadoop要用的JDK环境变量.守护进程JDK选项.pid文件和log文件夹 core-sit ...

  9. Netbeans使用Xdebug调试的配置

    在phpinfo()信息里找到php.ini的位置并打开php.ini在文档最后添加如下代码: 注释原来xdebug配置 xdebug.remote_enable=onxdebug.remote_ha ...

  10. QWidget: Must construct a QApplication before a QPaintDevice的问题

    卧槽,无意中编译自己基于Qt创建的Debug工程的时候运行时发生了标题中的错误,原来是把Qt Release的库也放到additional dependencies里面了,同时链接了Debug和Rel ...