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

　　<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. arraylist与List<>

    arraylist 不用规定 类型 list<>用规定类型 推荐list 这个编译检查类型  出错率低 代码质量高

  2. Linux 下安装oracle数据库

    原文出处       http://www.linuxidc.com/Linux/2015-02/113222.html 需要安装Oracle DataGuard,所以先要安装单台Oracle11g, ...

  3. VC中遍历进程并获取进程信息

    代码如下: /***************************************************/ /* 函数: 遍历进程信息 /* 参数:进程名称 例如: aaa.exe /* ...

  4. C++中使用stringstream简化类型转换

    C++标准库中的<sstream>提供了一个stringstream,以前基本没用过,突然发现很好用(^-^)V 参见 http://www.cplusplus.com/reference ...

  5. birt报表图标中文显示为框框的解决方法

    birt报表中图标部分的中文显示为框框,其他部分中文显示正常 解决办法:修改jdk中的字体设置/jdk1.6.0_13/jre/lib /fonts/fonts.dir 1.将宋体字体copy到/jd ...

  6. 火狐Ｆｉｒｅｆｏｘ　浏览器　onblur（）　并且ａｌｅｒｔ（）时文本被选中问题

    说明:镜像是组成在线实验课程的基础环境,教师设计的实验绑定一个或多个镜像,就组成了一讲独立的在线实验课程. 镜像名称:     火狐Firefox 浏览器 onblur() 并且alert()时文本被 ...

  7. kafka文档翻译（一）

    原文来自(http://kafka.apache.org/documentation.html) 本文只做简单的翻译,水平有限,仅供学习交流使用 如有错误,欢迎点评指正 1  准备开始 1.1 介绍 ...

  8. include .h 以及.cpp的记录

    VC include 路径解析要了解vc中使用#include命令包含头文件所搜寻的路径,必须先了解vc中的几种路径:1. 系统路径 系统路径在vc中是"Tools->Options- ...

  9. DataGrid导出excel

    DAL://产品信息导出——LPH public DataTable ExportRelease(string type) { string sql = "SELECT [ProductID ...

  10. QProcess进程间双向通信

    记得以前写过Linux的C程序, 里面用popen打开一个子进程, 这样可以用read/write和子进程通讯, 而在子进程里则是通过从stdin读和向stdout写实现对父进程的通讯. QProce ...