JS中判断鼠标按键的问题(event.button)

最新推荐文章于 2025-05-29 14:47:16 发布

原创最新推荐文章于 2025-05-29 14:47:16 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#function #ie #测试

Javascript 专栏收录该内容

57 篇文章

订阅专栏

本文详细介绍了不同浏览器下鼠标点击事件（mousedown和mouseup）中event.button属性的具体表现，并提供了屏蔽鼠标右键的方法。

mousedown事件

event.button	IE	Firefox	Chrome	Opera
左键	1	0	0	0
右键	2	2	2	2
中键	4	1	1	1
默认	--	--	--	--

测试代码：

IE：document.onmousedown = function(){console.log(window.event.button)} (注：IE不支持window.onmousedown)

non-IE: document.onmousedown = function(e){console.log(e.button)}

mouseup事件

event.button	IE	Firefox	Chrome	Opera
左键	1	0	0	0
右键	2	2	2	2
中键	4	1	1	--
默认	--	--	--	--

测试代码：

IE：document.onmouseup = function(){console.log(window.event.button)}(注：IE不支持window.onmouseup)

non-IE: document.onmouseup = function(e){console.log(e.button)}

屏蔽鼠标右键：if(e.button==2) e.preventDefault?e.preventDefault():(e.returnValue=false);

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

nelson

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

JavaScript 中的 event.which 和 event.button：鼠标事件属性解析

CodeWhizZ的博客

09-15

648

event.which 和 event.button 属性提供了处理鼠标事件时获取键码和按钮代码的便捷方式。通过这些属性，我们可以根据用户的操作进行相应的处理，实现更灵活和交互性强的网页功能。请记住，不同的浏览器可能对这些属性的支持有所不同，因此在开发时最好进行兼容性测试，以确保代码在各种环境下正常工作。event.which 属性返回一个整数，表示触发鼠标事件时按下或释放的键的 Unicode 值。event.button 属性用于鼠标事件，它返回一个整数，表示触发鼠标事件时按下或释放的鼠标按钮的代码。

参与评论您还未登录，请先登录后发表或查看评论

js判断鼠标左、中、右键哪个被点击的方法

10-24

在JavaScript中，可以通过`event.button`属性来获取鼠标按键的信息，该属性返回一个数值，代表了按下的鼠标按钮。这个值的不同，对应了不同的鼠标按钮： - `event.button == 0` 表示用户点击了鼠标左键（通常是主...

鼠标按下，javascript中event.which和event.button在各浏览器中的值

kittaaron的专栏

03-28

2329

本来是个列表格式的，提交之后csdn把格式搞乱了，看不清楚，直接给结论：从鼠标左中右键按顺序chrome,ff,ie中event.which的值分别是1，2，3 chrome,ff中event.button值左中右键值分别是：0，1，2 IE中event.button值分别是：1，4，2（为什么会有个4值呢？） IE6 7没有测试！

js中event.which和event.button

weixin_47582190的博客

11-23

1435

今天在练习开发扫雷的时候,需要监听鼠标点击的左右键事件,课程中老师使用的是event.which监听鼠标点击左右键,但是在自己电脑上使用的时候,发现提示该属性已经被web标准弃用,故百度了一下,可以用event.button来带代替 event.which table.onmousedown = function(event) { event = event || window.event //兼容IE console.log(event.target) //事件源测试

JavaScript 捕获按键

whwenming的专栏

12-25

1095

function test(event) { event = event || window.event; if(event.keyCode==13) { alert("你按了回车") } if(event.shiftKey==true) { alert("你按了shift") } if(event.ctrlKey==true) { alert("你按了ctrl") }if(event.altK

event.button

GoodIdea

05-30

2334

event.button实例分析 0 Default. No button is pressed.没有按下返回值是0 1 Left button is pressed.按下左键返回值是1 2 Right button is pressed.按下右键返回值是2 3 Left and right buttons are both pressed.左键右键同时按下返回值是3 4 Middle button is pressed.按下中间建（滚轮）返回值是4 5 Left and mid...

JavaScript中判断鼠标按键(event.button)

01-22

566

div id="test">div> script> document.oncontextmenu=function(){ return false; }; var oDiv=document.getElementById("test"); oDiv.onmousedown=function(e){ e= e || window.ev

精通JavaScript事件处理：event.target与currentTarget的区别

最新发布

weixin_32287387的博客

05-29

1006

在 JavaScript 中，属性在事件处理函数中扮演着重要的角色。当一个事件被触发时，它指向触发事件的最内层元素。无论事件监听器是绑定在哪个元素上，总是能准确地告诉我们事件从哪个具体的DOM元素开始的。事件模型中的允许开发者编写更加灵活的事件处理逻辑，尤其是当事件在DOM树中冒泡时。它与形成鲜明对比，后者引用了绑定事件监听器的元素。这一属性对于实现事件委托和处理动态添加或移除的元素上的事件至关重要。在JavaScript事件处理中，属性是指绑定事件监听器的元素。

JS中判断鼠标按键

bytxl的专栏

02-04

1154

IE 左键是 window.event.button = 1 右键是 window.event.button = 2 中键是 window.event.button = 4 没有按键动作window.event.button = 0 Firefox 左键是 event.button = 0 右键是 event.button = 2 中键是 event.button =

js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍

01-19

IE 左键是 window.event.button = 1 右键是 window.event.button...1 没有按键动作 event.button = 0 Opera 7.23/7.54 鼠标左键是 window.event.button = 1 没有按键动作 window.event.button = 1 右键和中键无法获取 O

event.X和event.clientX的区别分析

12-12

而event.X返回事件对象的相对于本体的坐标 event对象详解 ICOOE 2000.3.31 http://www.51js.com/ event代表事件的状态，例如事件发生的的元素、鼠标的位置等等，event对象只在事件过程中才有效。 event属性： altKey...

js把object（或者说json数据）转化为string对象《更新》

09-01

6573

参考了：js json object to string 变在原文的基础上进行了改进，加快处理速度。并在原文的基础上修改了三处不当之处：判定字符串时需要加上双引号""；空数组情况错误，需要判定：r[len==0? j : j-1] = ']'；空对象情况错误，需要

js把中文字符串转为gbk编码（页面编码需为gbk）

02-29

3426

一直以来遇到gbk编码，都是要求两次encodeURIComponent去实现的。这次的实现是才用模拟表单提交的方式去获取。具体如下代码： /* * add by yansong * for 在gbk页面里实现字符转换成gbk编码提交到后端 * add 传统的做法是进行两次encodeURIComponent后提交，而这个则是直接变成gbk编码，其他是页面编码必须是gbk */ (f

js实现iframe的load事件（兼容IE）

02-29

2721

判断iframe加载完成： function loadIframe(src, callback){ var iframe = document.createElement("iframe"); iframe.src = src; if(-[,1]){ // nonIE iframe.onload = callback; }else{ // IE iframe.onready

火狐下实现关闭当前页面的方法（当然其他浏览器也适用）

11-16

2685

首页为什么突出火狐浏览器呢？因为火狐默认情况下是不能关闭窗口的，有一个情况是这个窗口时通过window.open打开的。但是今天这个实践是来自共同做消保协议阅读的开发给我说的。具体的实现是：关闭窗口

HTML中的target属性之framename

12-01

2369

包含target属性的标签有：。对应的target值有： _blank _parent _self _top framename (标签没有) 对于上面四个来说，再熟悉不过了。但是很少有人注意到或者说使用到第五个值：framename。因为它设计得实在是太巧妙了。。。这里我给出一个替代异步的ajax登录方式的例子。但凡登录大多都是不能通过ajax方式去

用户离开页面和回到页面事件（标签切换）

11-17

1944

用户离开页面，但是不是关闭页面。最开始使用onload和onunload发现这两个指的是关闭页面和打开页面触发的事件，并不是用户离开这个页面去看另外一个页面的事件。然后通过测试发现用户离开页面起作用的事件是：blur & focus; 具体测试代码如下：测试离开页面和回到页面事件 #tt{ height: 20px; font-size: 14px; c

页面中有两个文本框tl 和t2。当在文本框t1中分别按下鼠标左键、鼠标中间键(滚轮)、鼠标右键时，在文本框t2中会显示对应的键码值。(提示:用event.button获取鼠标键的键码值。)用java script的知识

11-08

在JavaScript中，你可以通过监听`onmousedown`、`onmousemove`和`onmouseup`事件来实现在文本框t1中鼠标操作时，将对应键码值显示在文本框t2中。这里是一个简单的示例： ```javascript // 获取文本框元素 var tl = document.getElementById("textbox1"); // t1 var t2 = document.getElementById("textbox2"); // t2 // 监听鼠标左键点击 tl.addEventListener('mousedown', function(event) { t2.value = "键码值: " + event.button; // 左键是button值为0 }); // 监听鼠标中键滚动 tl.addEventListener('mousemove', function(event) { if (event.buttons === 1) { // 中键滚动通常为button值1 t2.value = "键码值: " + event.buttons; } }, {passive: true}); // 阻止默认滚动处理 // 监听鼠标右键点击 tl.addEventListener('mouseup', function(event) { t2.value = "键码值: " + event.button; // 右键是button值为2 }); ``` 注意，`event.buttons`属性在现代浏览器中返回的是一个整数，表示鼠标的按键状态（0：无按，1：主键，2：辅助键）。`onmousemove`事件可能会触发多次，所以需要检查`event.buttons`是否等于1来判断是否为主键。