HTML5-常见的事件- contextmenu 事件
主要控制应该何时显示上下文菜单，以便开发人员取消默认的上下文菜单而提供自定义的菜单
<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 事件的更多相关文章
- HTML5事件——contextmenu 隐藏鼠标右键菜单
在window中单击右键或在Mac中Ctrl+单击时会触发contextmenu事件,通过取消其默认动作能够提供自己定义菜单. 首先先写一个自己的菜单: <style> ul, li { ...
- 移动端前端常见的触摸相关事件touch、tap、swipe等整理
前端的很多事件在PC端和浏览器端可公用,但有些事件却只在移动端产生,如触摸相关的事件 本文整理了移动端常见的一些事件,包括原生支持的click.touch.tap.swipe事件,也有定义型的gest ...
- HTML5学习(十一)---服务器发送事件
参考教程:http://www.w3school.com.cn/html5/html_5_serversentevents.asp HTML5 服务器发送事件(server-sent event)允许 ...
- 移动端前端常见的触摸相关事件touch、tap、swipe
前端的很多事件在PC端和浏览器端可公用,但有些事件却只在移动端产生,如触摸相关的事件 本文整理了移动端常见的一些事件,包括原生支持的click.touch.tap.swipe事件,也有定义型的gest ...
- [JavaScript] JavaScript事件注册,事件委托,冒泡,捕获,事件流
面试题 event 事件 事件委托是什么? 如何阻止事件冒泡,阻止默认事件呢? Javascript 的事件流模型都有什么? 事件绑定和普通事件有什么区别? Event 对象 Event 对象,当事件 ...
- HTML5常见的面试题，基础知识点
HTML5常见的面试题 一.HTML 常 ...
- 三言两语之js事件、事件流以及target、currentTarget、this那些事
厉害了我的哥--你是如此简单我却将你给遗忘 放假前再看某文档,里边提到两个我既熟悉又陌生的概念target.currentTarget,说他熟悉我曾经看到过这两个事件对象的异同处,说他陌生吧?很不 ...
- jQuery--事件, 事件绑定, 阻止事件冒泡, 事件委托,页面载入后函数
1.常用事件, 按住shift键实现同步选择效果,搜索框联想效果 2.阻止事件冒泡 3.事件委托 4.使用 $(document).ready(function (){...}) 实现文件加载完绑定事 ...
- jQuery:自学笔记(4)——事件与事件对象
jQuery:自学笔记(4)——事件与事件对象 jQuery中的事件 什么是事件 所谓事件,就是被对象识别的操作,即操作对象队环境变化的感知和反应,例如单击按钮或者敲击键盘上的按键. 所谓事件流,是指 ...
随机推荐
- 从反编译的角度去观察C#6.0
1. 自动属性初始化 (Initializers for auto-properties) 1.1 C#6.0 之前的写法 public class FirstExperience { private ...
- Android与JS混编（js调用android相机）
参考android相机调用,http://blog.csdn.net/yanzi1225627/article/details/33028041/,谢谢 相机怎么调用就不做赘述了,下面是js调用 ...
- Windows下使用ODBC API访问数据库之关键
本文采用SQL2005 + VS2008环境,以ODBC API方式成功连接数据库. 1.SQL安装和环境配置 这部分网上随便搜一下都有很多资料,而且很容易就可以配置成功. 注意的关键点: SA账号配 ...
- ORA-00257: archiver error. Connect internal only, until freed 错误的处理方法
转帖:原文地址http://blog.csdn.net/panys/article/details/3838846 archive log 日志已满ORA-00257: archiver error. ...
- .net 调用Oracle.Data.Access 组件提供的用于批量操作的方法—获取数据库表结构方法和跟参数赋值方法
1./// <summary> /// 获取当前目标表结构 /// </summary> /// <param name="tableName"> ...
- C++类中的静态成员变量与静态成员函数的使用
代码: #include <iostream> #include <string> #include <cstdio> using namespace std; c ...
- GacLib使用方法（一）
GacLib使用方法 这是vczh大神的GacLib库新手入门,为自己做点笔记,详细的信息可以参考网页.下面简单说说怎么在自己的程序中使用GacLib库,本文只是前述网址中新手教程的一点体验,使用的环 ...
- 虚拟机安装centos
linux安装 鉴于国内大多数服务器都使用的redhat系列作为操作系统,centos又是redhat的免费版本,所以可以学习一下.因为另一台古董电脑已经装了linuxmint,虽然也可以安装虚拟机, ...
- 九章算法系列（#3 Binary Tree & Divide Conquer）-课堂笔记
前言 第一天的算法都还没有缓过来,直接就进入了第二天的算法学习.前一天一直在整理Binary Search的笔记,也没有提前预习一下,好在Binary Tree算是自己最熟的地方了吧(LeetCode ...
- DBA 思想天空笔记
/*+leading(t1) use_nl(t2*/这个HINT的含义,其中use_nl表示强制用嵌套循环连接方式.Leading(t1)表示强制先访问t1表,也就是t1表作为驱动表,增加HINT的目 ...