使用中键触发 onclick 事件

Question

我正在使用散列链接的onclick 事件打开<div> 作为弹出窗口。但是中间点击不会触发onclick事件，而只是获取链接的href属性值，并在新页面中加载URL。如何使用中键打开<div> 作为弹出窗口？

Answer 1

编辑

此答案已被弃用，并且 在 Chrome 上不起作用。您很可能最终会使用auxclick event，但请参阅下面的其他答案。

/编辑

---

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() 将停止事件的默认动作。

Answer 2

要检测到中键单击/鼠标滚轮按钮，您必须使用事件auxclick。例如：

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

然后在你的脚本文件中

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

如果你想通过 JavaScript 来做（不使用 HTML 属性 onauxclick），那么你 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 事件 here 的 mdn 页面。

Answer 3

你可以使用

event.button

识别单击了哪个鼠标按钮。

返回一个整数值，指示更改状态的按钮。

• 0 表示标准的“点击”，通常是左键
• 1 表示中间按钮，通常是滚轮点击
• 2代表右键，通常是右键

请注意，Internet Explorer 不遵循此约定：请参阅 QuirksMode 了解详情。

按钮的顺序可能会有所不同，具体取决于指针设备的配置方式。

另请阅读

Which mouse button has been clicked?

有两个属性可供查找 出了哪个鼠标键 单击：哪个和按钮。请注意 这些属性并不总是 处理点击事件。为了安全 检测您必须使用的鼠标按钮 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>

Answer 4

这个问题有点老了，但我找到了解决办法：

$(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 不会触发鼠标滚轮的“点击”事件

在 FF 和 Chrome 中工作

Answer 5

jQuery 为事件提供了一个.which 属性，该属性将单击按钮的ID 从左到右分别设置为1、2、3。在这种情况下，您需要2。

用法：

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

Adamantium 的答案也可以，但您需要注意 IE，因为他指出：

$("#foo").live('click', function(e) { 
   if((!$.browser.msie && e.button == 1) || ($.browser.msie && e.button == 2)) { 
     alert("middle button"); 
   } 
});

还要记住 .button 属性是 0-indexed 而不是像 .which 这样的 1-indexed。

Answer 6

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

中键点击功能被覆盖的网站真的很烦我。我通常会单击鼠标中键，因为我想在新选项卡中打开新内容，同时可以畅通无阻地查看当前内容。任何时候您都可以不理会中间点击功能并通过点击元素的 HREF 属性提供相关内容，我坚信您应该这样做。

Answer 7

正确的方法是使用.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

Answer 8

我知道我参加聚会迟到了，但是对于那些仍然无法处理中间点击的人，请检查您是否委派了该活动。在委托的情况下，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>

See it online here.