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

　　<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. WPF XAML之bing使用StringFormat(转)

    释义 BindingBase.StringFormat 属性 获取或设置一个字符串,该字符串指定如果绑定值显示为字符串,应如何设置该绑定的格式.        命名空间: System.Windows ...

  2. C#编写Windows服务程序图文教程（转载）

    Windows Service这一块并不复杂,但是注意事项太多了,网上资料也很凌乱,偶尔自己写也会丢三落四的.所以本文也就产生了,本文不会写复杂的东西,完全以基础应用的需求来写,所以不会对Window ...

  3. hive函数总结-字符串函数

    hive 查看函数: show  functions; parse_url: parse_url(url, partToExtract[, key]) - extracts a part from a ...

  4. IP地址基础和子网规划之其一

    IP地址的介绍:在TCP/IP环境中,各种各样的终端.工作站能同服务器.其他工作站无缝连接,是因为每一网络节点都使用了全网范围内能够唯一标识节点的IP地址.每个网络有一个全网唯一的网络号,在该网络中各 ...

  5. silverlight 生成图表 WCF 解析ＸＭＬ代码.svc.cs 文件

    silverlight 调用wcf 文件代码 private ListItem AnalyzeXML(string XMLCode, string Reportdate, string ChartNa ...

  6. Mysql存储过程分析

    为了搞明白为什么mysql的存储过程是高效的,我们需要理解mysql的执行流程是什么,当输入sql语句之后,mysql会先进行sql语句语法正确性检查,然后再进行编译,然后才执行,最后把结果返回.如下 ...

  7. Java系列--第一篇 Maven+Spring+Spring MVC+mybatis 示例

    基于Maven的Spring+SpringMVC+Mybatis的一个小项目的搭建,由于使用Maven3.1.0管理,所以Spring等都将使用的是时下(2013/9/8)最新的版本.即从http:/ ...

  8. CSS选择器4是下一代CSS选择器规范

    那么,这一版本的新东西有哪些呢? 选择器配置文件 CSS选择器分为两类:快速选择器和完整选择器.快速选择器适用于动态CSS引擎.完整选择器适用于速度不占关键因素的情况,例如document.query ...

  9. [模拟炉石](一)让游戏过程显示到cocos2d中

    在上篇中,如果运行了fireplace的tests/full_game.py,这个程序将一个游戏过程在终端上运行完成,可以看到整个过程,那么第一步要做的就是将这个过程显示到cocos2d创建的场景中去 ...

  10. 搬寝室（HDU 1421 DP）

    搬寝室 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submiss ...