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中的事件 什么是事件 所谓事件,就是被对象识别的操作,即操作对象队环境变化的感知和反应,例如单击按钮或者敲击键盘上的按键. 所谓事件流,是指 ...
随机推荐
- HTML与CSS入门——第八章 使用外部和内部链接
知识点: 1.链接锚的使用方法 2.在自己的网站上的页面之间链接的方法 3.链接到外部内容的方法 4.链接到一个E-mail地址的方法 5.在新浏览器窗口中查看链接的方法 6.用CSS为链接添加样式的 ...
- 传感器仿真平台——UI绘制模块（二）
这一章讲的是UI绘制模块 该模块的作用是将实验对象绘制出来,它可能是目标.传感器等等,由于事先并不知道会有哪些物体,也无法事先定义好某个对象该怎么画,以我懒人的性格,得了,就抛给用的人吧~喝前摇一摇, ...
- Action Result
操作返回的内容成为操作结果 大多数情况下返回ViewResult,基类ActionResult 6钟标准类型: ViewResult:视图结果,包含HTML标记等元素 EmptyResult:空结果 ...
- 如何制作windows服务安装包
以下转自:http://blog.csdn.net/chainan1988/article/details/7087006 Window服务的安装有两个方式: 一.命令安装 通过命令 ...
- BestCoder Round #81 (div.2)1001
Machine Accepts: 580 Submissions: 1890 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65 ...
- Oracle11g R2学习系列 之十 解决EM不能用
不知道是什么原因https://localhost:1158/em,今天突然就不能用了.做了好多搜索也没有解决.现象是在services.msc中,不能重启OracleDBConsole服务,提示: ...
- hibernate集合映射inverse和cascade详解
hibernate集合映射inverse和cascade详解 1.到底在哪用cascade="..."? cascade属性并不是多对多关系一定要用的,有了它只是让我们在插入或 ...
- 使用pip install 或者easy_install安装Python的各种包出现cc failed with exit status 1
*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...
- Maven+SpringMVC+Mybatis 开发环境整合
1.maven build遇到了如下问题: [ERROR] Failed to execute goal org.codehaus.mojo:tomcat-maven-plugin:1.1:rede ...
- IE10-IE11在NET4.0下出现“__doPostBack未定义”解决方案
IE10在NET4.0下出现"__doPostBack未定义"的办法 参考文章: http://blogs.msdn.com/b/scott_hanselman/archive/2 ...