logo标签列表

使用中键触发onclick事件

javascriptjquery
119

我正在使用一个带有哈希链接的 onclick 事件来打开一个 <div> 弹出框。但是， 中键单击不会触发 onclick 事件，而只会获取链接的 href 属性值并在新页面中加载该 URL。如何使用中键单击来打开 <div> 弹出框？

18
当鼠标中键不触发onclick事件时，我仍然不明白问题是如何解决的。 - Tomáš Zato
4
浏览器不会在中键单击时触发'click'事件，但是它们可能会触发'mouseup'事件。然后JavaScript框架可能将此绑定到'click'动作以使您感到困惑。我建议阅读http://www.unixpapa.com/js/mouse.html。 - rds
8个回答
71

编辑

这个答案已被弃用，并且在Chrome上无效。你最可能会使用auxclick事件，但请参考下面的其他答案。

/编辑

beggs的答案是正确的，但是它似乎你想防止鼠标中键默认行为。如果是这样，包含以下代码：

$("#foo").on('click', function(e) {
   if (e.which == 2) {
      e.preventDefault();
      alert("middle button"); 
   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="foo" href="http://example.com">middle click me</a>

preventDefault()方法将阻止事件的默认动作。
20
请记住，.live 已被弃用并被 .on 取代。 - Naftali
2
对我来说，FF仅适用于mousedown事件。单击事件调用此内容http://scr.hu/1kig/su5c9 - l00k
1
有没有适用于所有浏览器的常量 2？ - fracz
11
在Chrome 55中，此方法已不再适用。请参见1、2和此问题。 - billc.cn
1
当问题在于中键没有触发点击事件时，如何将其作为解决方案呢？ - Drazen Bjelovuk
显示剩余6条评论
64

要检测鼠标的中键/滚轮按钮，您需要使用事件auxclick。例如：

<a href="https://example.com" onauxclick="func()" id="myLink"></a>

然后在你的脚本文件中：

function func(e) {
  if (e.button == 1) {
    alert("middle button clicked")
  }
}

如果您想在不使用HTML属性onauxclick的情况下从JavaScript进行操作，则需要向元素添加addEventListener：

let myLink = document.getElementById('myLink')
myLink.addEventListener('auxclick', function(e) {
  if (e.button == 1) {
    alert("middle button clicked")
  }
})
<a id="myLink" href="http://example.com">middle click me</a>

在这里查看与auxclick事件相关的mdn页面。

请注意：onauxclick可以工作，但它不会在新标签页中打开链接... - Jonathan Laliberte
4
这是唯一在Chrome中实际可行的答案。如果您需要右键单击触发"click"事件，可以使用"contextmenu"（虽然它不仅被右键单击触发）：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/contextmenu_event - Kankaristo
2
结合上面的答案，您可以通过 if(event.button==1) 条件语句来防止右键截图，这是唯一有效的答案。 - Buddy
1
请注意，您需要同时使用 auxclick 事件，并检查 e.button == 1 的值。我已编辑了答案。 - Flimm
请注意，它在Safari上不起作用。https://caniuse.com/auxclick - LucianDex
28

您可以使用event.button来识别所点击的鼠标按钮。

返回表示更改状态的按钮的整数值。

  • 0表示标准“单击”，通常为左键
  • 1 表示中间按钮，通常为滚轮单击
  • 2 表示右按钮，通常为右键

请注意，在Internet Explorer中不遵循此约定：详见QuirksMode。

按钮顺序可能因指针设备的配置方式而有所不同。

还请阅读

哪个鼠标按钮被点击了？

有两个属性可用于查找已单击的鼠标按钮：which和button。请注意，这些属性并不总是在单击事件上起作用。要安全地检测鼠标按钮，您必须使用mousedown或mouseup事件。

document.getElementById('foo').addEventListener('click', function(e) {
  console.log(e.button);
  e.preventDefault();
});
<a id="foo" href="http://example.com">middle click me</a>

4
我建议使用event.which，因为它在jQuery源代码的第2756行已经被标准化跨浏览器支持。另外，如果你需要兼容旧版浏览器，可以添加以下代码：if ( !event.which && event.button ) event.which = (event.button & 1 ? 1 : ( event.button & 2 ? 3 : ( event.button & 4 ? 2 : 0 ) ));注意不要改变原文意思。 - Russ Cam
2
@RussCam 然而，MouseEvent.which在任何规范中都没有定义，但是MouseEvent.button在DOM L2事件中有定义。 - Oriol
@Oriol 正确，但在不同的浏览器供应商中实现方式不同。OP使用jQuery标记了问题，所以我建议使用event.which，但应该详细说明MouseEvent.which不是官方规范的一部分。 - Russ Cam
@rahul，多于7个按钮的游戏鼠标怎么样？http://www.egg-tech.com/blog/images/mouse%20buttons.jpg - Pacerier
1
实际上，这在像Firefox或Chrome这样的浏览器中不起作用，只适用于主要点击。请参见[1]（https://bugs.chromium.org/p/chromium/issues/detail?id=255#c160），[2]（https://developers.google.com/web/updates/2016/10/auxclick）和[此问题]（https://dev59.com/oVgR5IYBdhLWcg3wnOVw）。 - Flimm
13

这个问题有些老了，但我发现了一个解决方案：

$(window).on('mousedown', function(e) {
   if( e.which == 2 ) {
      e.preventDefault();
   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="http://example.com">middle click me</a>

Chrome不会为鼠标滚轮触发“click”事件

在FF和Chrome中有效

我不想假设你的使用情况，但我敢打赌很多人实际上需要“mouseup”事件。它也适用于中间鼠标按钮。 - Bojidar Stanchev
当我在Firefox和Chrome中尝试此操作时，即使调用e.preventDefault()，也无法阻止打开链接的默认行为。 - Flimm
8

通常我不喜欢人们提供替代方案而不是解决方案，但既然已经提供了解决方案，我要打破自己的规则。

那些覆盖了中键点击功能的网站让我非常非常烦恼。我通常中键点击是因为我想在新标签页中打开新内容，同时保持当前内容的不受干扰的视图。只要你可以保留中键点击功能并通过所点击元素的HREF属性提供相关内容，我坚信这就是你应该做的。

2
但是如果您的网页上有选项卡，并且希望与浏览器中相同的行为，则中键单击应关闭现有选项卡。 - cmxl
7

jQuery在事件上提供了一个.which属性，可以按从左到右的顺序给出点击按钮的id，分别为1、2、3。在这种情况下，您需要选择2。

用法：

$("#foo").live('click', function(e) { 
   if( e.which == 2 ) {
      alert("middle button"); 
   }
});

亚当antium的答案也可以，但需要注意IE，正如他所指出的那样。
$("#foo").live('click', function(e) { 
   if((!$.browser.msie && e.button == 1) || ($.browser.msie && e.button == 2)) { 
     alert("middle button"); 
   } 
});

也请记住，.button属性是0索引的，而不是像.which一样的1索引。

我能覆盖Mozilla浏览器的功能吗！例如，在左键单击时，它会打开一个弹出窗口...但是对于中键单击，它不会打开弹出窗口，而是打开一个新标签页，在其中不会打开弹出窗口...因此，我想覆盖Mozilla的中键单击功能。 - Sadesh Kumar N
Mozilla有一个设置，可以在新标签页中打开所有弹出窗口而不是新窗口。如果用户启用了此选项，那么我认为您无法做任何事情。如果这不是发生的情况，您可以发布一些代码或指向问题页面的链接吗？ - beggs
这在像Firefox和Chrome这样的浏览器中不起作用。 - Flimm
5
正确的方法是使用.on，因为.live已经被弃用并从jQuery中删除：
$("#foo").on('click', function(e) { 
   if( e.which == 2 ) {
      e.preventDefault();
      alert("middle button"); 
   }
});

如果你想要页面具有“实时”效果，而且文档开始时没有#foo：

$(document).on('click', '#foo', function(e) { 
   if( e.which == 2 ) {
      e.preventDefault();
      alert("middle button"); 
   }
});

original answer

1
事件click在像Firefox和Chrome这样的浏览器中无法用于中间鼠标按钮。 - Flimm
以前它用于@Flimm - Naftali
是的，Stack Overflow没有一个好的解决方案来处理过时的答案。我很抱歉不得不给它点个踩，因为它已经"不再有用"了。更糟糕的是，固定的答案可能会因为过时而被投下数百或数千个负分，但如果原帖作者没有回应，它仍将永远保持固定状态。 - Flimm
请提出一个新问题 :-) （引用此问题并说明它已过时，您需要2020年的答案）。但也可以使用mousedown/mouseup事件吗？ - Naftali
即使我这样做了，像我这样的人仍然会在从搜索引擎进入时遇到这个答案，并且会被固定的错误答案所困惑。 - Flimm
当你有了你的答案后，我可以在我的回答中链接它（对于2020年的情况，请转到这里或类似的地方 :-)）。 - Naftali
3
我知道我来晚了，但对于那些仍然在处理中间点击问题的人，请检查是否委托事件。在委派的情况下，click事件不会触发。比较如下：

这适用于中间点击：

$('a').on('click', function(){
  console.log('middle click');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="http://example.com">middle click me</a>

这对于中间点击无效：

$('div').on('click', 'a', function(){
  alert('middle click');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <a href="http://example.com">middle click here</a>
</div>

如果您仍需要使用事件委托来跟踪中间点击，如jQuery ticket中所述，唯一的方法是改用mousedown或mouseup。示例如下： 这适用于委派的中间点击： 

$('div').on('mouseup', 'a', function(){
  console.log('middle click');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <a href="http://example.com">middle click me</a>
</div>

在这里在线查看。

1
实际上，click 不适用于中键点击，就像你第一个例子中的那样。 - Flimm
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接