使用中键单击触发onclick事件

Question

我正在使用onclick哈希链接的事件打开<div>一个弹出窗口.但是中间点击不会触发onclick事件,只会获取href链接的属性值并在新页面中加载URL.如何使用中间点击打开<div>弹出窗口？

Answer 1

beggs的回答是正确的,但听起来你想要阻止中间点击的默认动作.在这种情况下,请包括以下内容

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

preventDefault()将停止事件的默认操作.

Answer 2

您可以使用

event.button

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

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

• 0表示标准'点击',通常是左键
• 1为中间按钮,通常是轮子点击
• 2为右键,通常右键单击

请注意,Internet Explorer中未遵循此约定:有关详细信息,请参阅QuirksMode.

按钮的顺序可以根据指示设备的配置方式而不同.

还看了

单击了哪个鼠标按钮？

有两个属性可以找出单击了哪个鼠标按钮:哪个和按钮.请注意,这些属性并不总是适用于单击事件.要安全地检测鼠标按钮,您必须使用mousedown或mouseup事件.

Answer 3

要检测中键单击/鼠标滚轮按钮,您必须使用该事件auxclick.例如:

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

然后在你的脚本文件中

func() {
    alert("middle button clicked")
}

如果你想从JavaScript中做到这一点,那你就addEventListener到了元素:

let myLink = document.getElementById('myLink')
myLink.addEventListener('auxclick', function(event) {
    alert("middle button clicked")
})

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

Answer 4

当人们提供替代品而不是解决方案时,我通常讨厌,但由于已经提供了解决方案,我将打破我自己的规则.

中间点击功能被覆盖的网站往往真的,真的让我烦恼.我通常是中键单击,因为我想在新选项卡中打开新内容,同时查看当前内容的无障碍视图.任何时候你可以单独留下中间点击功能,并通过你点击的元素的HREF属性提供相关内容,我坚信你应该做的.

Answer 5

这个问题有点旧,但我找到了一个解决方案:

$(window).on('mousedown', function(e) { 
   if( e.which == 2 ) {
      e.preventDefault();
   }
});

Chrome不会触发鼠标滚轮的"点击"事件

在FF和Chrome中工作

Answer 6

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.

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"); 
   }
});

原始答案