如何检测鼠标中键点击?

How to detect middle mouse button click?

提问人:Nate 提问时间:1/20/2014 更新时间:8/11/2021 访问量:33692

问:

我看到的关于如何在 JavaScript 中检测鼠标中键点击的所有问题都与 jQuery 有关,但我想知道如何使用常规 JavaScript 检测鼠标中键点击。我尝试使用 ,但它似乎仅适用于鼠标左键。onClick()

是否有可以检测鼠标左键和鼠标中键单击的 JavaScript 函数,如果没有,可以检测鼠标中键单击?

我问的原因是我想在单击链接时进行函数调用,而不管是使用鼠标左键还是中键。

JavaScript的

评论

0赞 Gaucho_9 1/20/2014
在发布之前搜索:stackoverflow.com/questions/5833928/... ;)。对不起,内特,我没有好好读!
2赞 Nate 1/20/2014
@Gaucho_9 在训斥之前阅读问题;-)我试图弄清楚是否可以在没有 jQuery 的情况下跟踪鼠标中键点击。
0赞 Nate C-K 1/20/2014
quirksmode.org/js/events_properties.html

答:

3赞 Sterling Archer 1/20/2014 #1

您必须检测事件2

event = event || window.event; //make sure to pass the event into the function
if (event.which == 2) {
    //do code..
}
3赞 Josan 1/20/2014 #2

下面的代码可以帮到你。它可以检测用户单击了哪个鼠标按钮。 用于中间按钮。e.which == 2

<script type="text/javascript">

function detect_button(e){  
    e = e || window.event;

    if (e.which == null){
        button = (e.button < 2) ? 'left' : ((e.button == 4) ? 'middle' : 'right');
    }
    else{
        button = (e.which < 2) ? 'left' : ((e.which == 2) ? 'middle' : 'right');
    }

    alert(button);
}

</script>

评论

9赞 Sterling Archer 1/20/2014
如果您要复制从注释链接的代码,至少要先解释一下。
37赞 Schien 1/20/2014 #3

OnClick 不依赖于鼠标,而是更多地依赖于目标元素本身。

以下是检测元素是否处于中键点击状态的方法:

document.body.onclick = function (e) {
  if (e && (e.which == 2 || e.button == 4 )) {
    console.log('middleclicked')
  }
}

评论

1赞 Schien 1/20/2014
我添加了另一个示例,您可以在其中传入其他参数。请注意该函数如何返回函数本身,并且隐式“e”位于封闭函数的调用堆栈上。我通常不会进入上下文来解释这种语法。感谢这个机会,尤其是在不使用 jQuery 的情况下!
1赞 Schien 3/20/2016
@fiatjaf感谢您编辑答案。只想指出,编辑将 OnClick 事件附加到 document.body,而我的答案附加到特定的 DOM 节点。编辑显着改变了我的答案。既然 OP 已经得到了他的答案,我不介意你现在是否恢复编辑。
2赞 fiatjaf 3/20/2016
我很抱歉进行了大编辑,但 StackOverflow 不是一个注定要只回答提出问题的特定人的网站,而是一本关于如何做代码事情的大百科全书。我认为,你的回答有有用的信息,在其他任何地方都不容易找到,但它令人困惑。我的编辑是为了让它更有用,更容易阅读,以便将来遇到这个问题的人阅读。如果您认为有问题,请重新编辑。
7赞 Advait Junnarkar 3/2/2020
这仅适用于按钮元素。要检测中键单击任何元素,您必须妥协并使用 。从技术上讲,这不是一个完整的“点击”事件,因为用户可能会移动鼠标。.addEventListener('mousedown', ...
4赞 disrvptor 1/20/2014 #4

你必须使用已经内置在 DOM 和 Javascript 引擎中的东西,然后放入浏览器不同的情况下(这就是通常使用 jQuery 的原因)。

document.getElementById("myBtn").onclick = function(event) {
    event = event || window.event

    // Now event is the event object in all browsers.

    // Note: event.target - the reference to clicked element. IE uses event.srcElement
    // In W3C there is a button property which works same in all browsers except IE:
    // 0 - left button, 1 - middle button, 2 - right button
    // For IE, left button = button & 1 (the 1st bit) is set to 1
    // right button = button & 2 (the 2nd bit) is 1
    // and middle button = button & 4 (the 3rd bit)
    var left = event.button == 0 || 1 == event.button&1;
    var middle = event.button == 1 || 1 == event.button&2;
    var right = event.button == 2 || 1 == event.button&3;

    // Put your code here
}

评论

4赞 Vadzim 2/15/2018
event.button == 1也触发 .所以这个代码被破坏了。1 == event.button&1
1赞 disrvptor 3/9/2018
好渔获!因此,您需要将其包装在 IE 部分和非 IE 部分中。
2赞 Blue Eyed Behemoth 3/18/2021
赞成,因为它不使用已弃用的.which
3赞 Danspotnytool 8/11/2021 #5

已经在这里的答案/解决方案可能对其他人有效,但对我不起作用。 所以我的解决方案是:我不使用事件,而是使用事件clickmousedown

window.onmousedown = (event) => {
    if (event.button == 1 || event.buttons == 4) {
        console.log('middle mouse');
    }
}

window.addEventListener('mousedown', (event) => {
   if (event.button == 1 || event.buttons == 4) {
      console.log('middle mouse');
   }
});

评论

0赞 arcanemachine 1/3/2022
该事件是有点笨拙的“mousedown”事件的有效替代方案,尽管截至 2022 年 1 月,IE11 和 Safari 缺乏对该事件的支持。auxclick