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

　　<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. js获取浏览器滚动条距离顶端的距离

    最近在做项目的时候遇到需要用js获取滚动条距离窗口顶端的距离和js获取浏览器可视化窗口的大小,在这儿做一个整理保存:    一.jQuery获取的相关方法 jquery 获取滚动条高度 获取浏览器显示 ...

  2. Masters of Doom

    http://blog.codinghorror.com/you-dont-need-millions-of-dollars/ "In the information age, the ba ...

  3. Java数据输入

    以下是数据输入实例: //以下是数据输入实例 import java.util.Scanner;//导入java.util.Scanner,Scanner首字母大写 public class Test ...

  4. docker --- 初识

    Docker简介 Docker是一个开源的引擎,可以轻松的为任何应用创建一个轻量级的.可移植的.自给自足的容器.开发者在笔记本上编译测试通过的容器可以批量地在生产环境中部署,包括VMs(虚拟机).ba ...

  5. 拉姆达表达式 追加 条件判断 Expression<Func<T, bool>>

    public static class PredicateBuilder { /// <summary> /// 机关函数应用True时:单个AND有效,多个AND有效:单个OR无效,多个 ...

  6. Core Data数据持久性存储基础教程－备用

    摘要 就像我一直说的,Core Data是iOS编程,乃至Mac编程中使用持久性数据存储的最佳方式,本质上来说,Core Data使用的就是SQLite,但是通过一系列特性避免了使用SQL的一些列的麻 ...

  7. mysql group_concat函数是有长度限制的

    在表关联查询中,特别是一对多关系的表查询中,group_concat函数是很有用的一个函数,帮助我们减少对数据库查询的次数,减少服务器的压力. 但是今天使用group_concat函数查询数据库时,发 ...

  8. goldengate介绍

    Oracle Golden Gate软件是一种基于日志的结构化数据复制备份软件,它通过解析源数据库在线日志或归档日志获得数据的增量变化,再将这些变化应用到目标数据库,从而实现源数据库与目标数据库同步. ...

  9. Log4net 配置详解

    首先需在config文件的<configSections>节点中增加子节点配置. <configSections> <section name="log4net ...

  10. 关于box-sizing

    http://www.zhangxinxu.com/css3/css3-box-sizing.php box-sizing:border-box; -o-box-sizing:border-box; ...