javascript 处理鼠标右键事件

使用右键事件

在需要右键的地方加上  onmousedown="if(event.button == 2) alert(‘点击右键了!‘);即可

不经意地被一位同事问起在javascript里面如何检测右键事件,并且屏蔽原来的右键菜单,上网查找一翻之后发现一些比较简单的方法。
如设置onmousedown,检查其event.button的值是不是2(代表右键)。
这个方法在FF和IE中都可用,但是在Maxthon中event.button却是0,这让我有点困惑,Maxthon不是IE内核的吗?
我只能设想Maxthon这个壳是做过手脚的。然而如果设置onmouseup,其event.button值就是2了。
所以如果检测右键的话,是设置其onmouseup即可。

document.getElementById("test").onmouseup=function(oEvent) {
    if (!oEvent) oEvent=window.event;
    if (oEvent.button==2) {
        //-- do something for user right click
        // alert("Mouse up");
    }
}

但是如果还需要屏蔽右键的话,还是用oncontextmenu比较简单,但这时就不是检测右键,而是检测是否弹出上下文菜单。

蔽的方法跟屏蔽其他默认行为的方法是一样的,一般来说都是有效的,不过因为某些浏览器有禁止禁止弹出右键菜单的功能,所以如果需要在用户点击右键时做点事
情,最好还是不要放在oncontextmenu中,而是放在onmouseup中并检测右键,附加oncontextmenu来屏蔽原来的菜单。

document.getElementById("test").oncontextmenu=function(event) {
    //-- do something here
    // alert("ContextMenu Popup");
    //-- prevent the default behavior
    if (document.all) window.event.returnValue = false;// for IE
    else event.preventDefault();
};

通过一些简单的测试,可以发现在FF和在IE存在着有趣的区别。

onmouseup和oncontextmenu事件处理中都使用alert,可以看出来是先执行onmouseup事件再到oncontextmenu
的,在IE中,两者会非常连贯的在一起执行,(均认为是发生在test元素上的事件),而在FF里面则不是(前提是test元素所占区域比较小,当
alert弹出时需要移动鼠标才能点击‘OK‘的情况下),它会先执行onmouseup,alert出来之后,移动鼠标点击‘OK‘,这时还是会弹出菜
单的,但是如果不移开鼠标,而是直接按Enter确认的话,这时它就会认为是在test元素上触发的事件了。可以理解为是IE 和
Firefox中的事件机制的细节区别。当然我们很少会应用到连续事件的,就无须注意到这点区别了,把需要的事件处理完整的写在一个处理方法里面就是最简
单有效的解决方案了。

时间: 2024-10-07 19:36:45

javascript 处理鼠标右键事件的相关文章

Unity 添加鼠标右键事件

把此类放到 Editor下使用就OK 1 using UnityEngine; 2 using System.Collections; 3 using System.Collections.Generic; 4 using UnityEditor; 5 6 /// <summary> 7 /// 添加鼠标右键事件 8 /// </summary> 9 [InitializeOnLoad] 10 [ExecuteInEditMode] 11 public static class A

JavaScript屏蔽鼠标右键

JavaScript屏蔽鼠标右键还可以在body标签里加上oncontextmenu= self.event.returnvalue=false 或者: function nocontextmenu(){ if(document.all) { event.cancelBubble=true; event.returnvalue=false; return false;http://www.mlybyby.com }} 或者: 另外 oncontextmenu="window.event.retu

Javascript和jquery事件--鼠标右键事件,contextmenu

右键点击触发是浏览器的默认菜单事件contextmenu,你可以选择阻止它,使用event.preventDefault();或者return false;. 想要定义右键点击事件,关注的是mouseup或者mousedown事件,使用event获取点击的键: Js中使用event. button---0,1,2分别是左键.滚轮.右键 Jq中使用event.which---1,2,3分别是左键.滚轮.右键 <!DOCTYPE html> <html lang="zh-cn&qu

IE和Chrome执行javascript对鼠标双击事件的不同响应

最近在用天地图API帮同学做点开发的工作,主要是基于天地图的API实现违法用地举报的在线地图标绘,要实现的效果如下: 由于是基于天地图API的TPolygonTool工具实现面积量测和多边形绘制功能,实现思路如下: (1)基于按钮的鼠标点击事件开启多边形标绘工具: 1 //开启/关闭违法标绘工具 2 function onClickPolyTool() { 3 var btn = document.getElementById("polyToolBtn"); 4 if (btn.val

jquery 鼠标右键事件、左键单击事件判定

$(function(){ $('a').mousedown(function(e){ alert(e.which) // 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键 return false;//阻止链接跳转 }) }) 如 : $('#as121').mousedown(function(e){           if(3 == e.which){                alert('这 是右键单击事件');                      }el

JavaScript模拟鼠标右键菜单

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>右键菜单</title> <style type="text/css"> *{ margin: 0; padding: 0; } #menu{ width: 254px; /*background-color: #ccc;*/

javascript 自定义鼠标右键菜单

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #menu{ border:solid 1px gray; width:100px; display:none; position:absolute; background-color:ghostwhite; margin: 0; padding:

OpenLayers 3 之 添加地图鼠标右键菜单

添加右键菜单,首先我们要监听鼠标右键点击的操作,我们知道鼠标右键事件名是 contextmenu,当鼠标在 html 元素之上,点击鼠标右键,便会触发 contextmenu 事件,在 contextmenu 事件的回调函数中实现相应的显示菜单功能即可. 那么在 openlayers 中,在地图中添加这个事件,我们从哪里下手呢?首先我们得了解 openlayers 的初始化页面的过程. openlayers 初始化页面过程 openlayers 也是一个前端库,那么它肯定离不开 html 的运用

鼠标右击事件

鼠标左击事件是我们常常遇到的,那么,如何写一个鼠标右击事件呢? 通常,鼠标有三个键:左键(1).中键(2).右键(3),jQuery通过e.which即可判断点击了哪一个按键,如果不通过e.which判断,则默认点击了鼠标左键.例如: $('.btn').mousedown(function(e){ if(3 == e.which){ alert('这是右键单击事件'); }else if(1 == e.which){ alert('这是左键单击事件'); } else{ alert('这是中键