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

　　<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. 黑马程序员—— Java SE（3）

    ----<a href="http://www.itheima.com" target="blank">Java培训.Android培训.iOS培训 ...

  2. (转)C#之玩转反射

    前言 之所以要写这篇关于C#反射的随笔,起因有两个:   第一个是自己开发的网站需要用到   其次就是没看到这方面比较好的文章. 所以下定决心自己写一篇,废话不多说开始进入正题. 前期准备 在VS20 ...

  3. ListView小坑

    ListView的addHeaderView()和addFooterView()方法需要“Call this before calling setAdapter”,否则崩溃. 但是在KITKAT(ap ...

  4. 数据库分库分表(sharding)系列(二) 全局主键生成策略

    本文将主要介绍一些常见的全局主键生成策略,然后重点介绍flickr使用的一种非常优秀的全局主键生成方案.关于分库分表(sharding)的拆分策略和实施细则,请参考该系列的前一篇文章:数据库分库分表( ...

  5. ORACLE SQL 组函数【weber出品必属精品】

    组函数:对一组数据进行加工,每组数据返回一个值 常用的组函数:count()  avg()  max()   min()  sum()   count()函数  1. count(*) :返回总共的行 ...

  6. mysql-cluster集群原理介绍和搭建步骤(四个data/sql节点) (转)

    MySQL簇概述 MySQL簇是一种技术,该技术允许在无共享的系统中部署“内存中”数据库的簇.通过无共享体系结构,系统能够使用廉价的硬件,而且对软硬件无特殊要求.此外,由于每个组件有自己的内存和磁盘, ...

  7. 1170: 非常男女(XCOJ 前缀和)

    1170: 非常男女 时间限制: 1 Sec  内存限制: 128 MB提交: 22  解决: 9 标签提交统计讨论版 题目描述 Matrix67已经当过多次“媒人”了.他因此获得了许多经验.例如,距 ...

  8. hibernate+spring+mvc+Easyui框架模式下使用grid++report的总结

    最近刚开始接触hibernate+spring+mvc+Easyui框架,也是刚开通了博客,希望能记录一下自己实践出来的东西,让其他人少走弯路. 转让正题,以个人浅薄的认识hibernate对于开发人 ...

  9. qt之窗口换肤（一个qss的坑：当类属性发现变化时需要重置qss，使用rcc资源文件）

    1.相关文章 Qt 资源系统qt的moc,uic,rcc命令的使用 2.概要    毕业两年了,一直使用的是qt界面库来开发程序,使用过vs08.10.13等开发工具,并安装了qt的插件,最近在做客户 ...

  10. mysql 增量导入到elasticsearch

    <pre name="code" class="html">zjtest7-redis:/odbc_es# cat /odbc_es/run_mys ...