使用中键触发onclick事件

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

编辑

该答案已被弃用，不适用于Chrome。您很可能最终会使用auxlink事件，但请参考以下其他答案。

/编辑

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（）将停止事件的默认操作。

为了检测到单击中键/鼠标滚轮，您必须使用event 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>

结帐有关的MDN页面auxclick事件在这里。

您可以使用

事件按钮

以确定单击了哪个鼠标按钮。

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

• 0为标准的“单击”，通常为向左按钮
• 1为中间按钮，通常是滚轮单击
• 2为右键，通常单击鼠标右键

请注意，Internet Explorer中未遵循此约定：有关详细信息，请参见QuirksMode。

根据指示设备的配置方式，按钮的顺序可能会有所不同。

也看了

单击了哪个鼠标按钮？

有两个属性可以找出单击了哪个鼠标按钮：哪个和按钮。请注意，这些属性并不总是在单击事件上起作用。为了安全地检测到鼠标按钮，您必须使用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>

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

忽略中键功能的网站往往会给我造成很大的困扰。我通常会单击鼠标中键，因为我想在新选项卡中打开新内容，同时保持当前内容的通畅视图。任何时候只要您可以保留中单击功能，并通过clicked元素的HREF属性提供相关内容，我都坚信这是您应该做的。

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索引而不是1索引.which。

这个问题有点老了，但是我找到了一个解决方案：

$(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中工作

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

原始答案

我知道我参加晚会很晚，但是对于那些仍然在处理中间点击时仍然遇到问题的人，请检查是否委托该活动。在授权的情况下，该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票证中所述的唯一方法就是使用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>

在这里在线查看。