使用中键触发 onclick 事件

IT技术 javascript jquery
2021-02-01 03:12:49

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

6个回答

编辑

此答案已被弃用,不适用于 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()将停止事件的默认操作。

当问题是中间点击不会触发点击事件开始时,这是如何解决的?
2021-03-13 03:12:49
这不再适用于 Chrome 55。参见12这个问题
2021-03-27 03:12:49
对我来说,FF 仅适用于 mousedown 事件。点击事件调用这个东西scr.hu/1kig/su5c9
2021-04-01 03:12:49
是否有任何跨浏览器常量2
2021-04-02 03:12:49
请记住,它.live已被弃用并删除以支持.on
2021-04-10 03:12:49

要检测到中键/鼠标滚轮按钮,您必须使用 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事件在这里

这是在 Chrome 中实际有效的唯一答案。如果你需要一个鼠标右键的“点击”事件,你可以使用“contextmenu”(虽然它不仅通过右键点击触发):developer.mozilla.org/en-US/docs/Web/API/Element/...
2021-03-30 03:12:49
结合上述答案,您可以防止右键单击捕获if(event.button==1)子句,这是唯一有效的答案。
2021-04-03 03:12:49
请注意,您需要同时使用auxclick事件和检查 的值e.button == 1我编辑了答案。
2021-04-08 03:12:49
注意:onauxclick 可以使用,但它不会在新标签页中打开链接...
2021-04-10 03:12:49

您可以使用

事件按钮

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

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

  • 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>

我建议使用event.which它,因为它已在 jQuery 源代码中跨浏览器标准化 - 第 2756 行 -if ( !event.which && event.button ) event.which = (event.button & 1 ? 1 : ( event.button & 2 ? 3 : ( event.button & 4 ? 2 : 0 ) ));
2021-03-29 03:12:49
@rahul,超过 7 个按钮的游戏鼠标怎么样?egg-tech.com/blog/images/mouse%20buttons.jpg
2021-03-30 03:12:49
@Oriol 正确,但不同浏览器供应商的实现方式不同。OP 用 jQuery 标记了这个问题,所以这就是为什么我建议使用event.which但应该详细说明这MouseEvent.which不是官方规范的一部分。
2021-03-31 03:12:49
@RussCam 但是,MouseEvent.which没有在任何规范MouseEvent.button中定义,而是在 DOM L2 事件中定义。
2021-04-01 03:12:49
实际上,这在 Firefox 或 Chrome 等浏览器中不起作用,仅适用于主要点击。12这个问题
2021-04-04 03:12:49

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

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

我不想假设您的用例,但我敢打赌,很多人实际上会需要 'mouseup' 事件。它也适用于鼠标中键。
2021-03-24 03:12:49
当我在 Firefox 和 Chrome 中尝试此操作时,它不会阻止在新选项卡中打开链接的默认行为,即使e.preventDefault()被调用。
2021-04-10 03:12:49

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 而不是 1-indexed like .which

Mozilla 具有在新选项卡而不是新窗口中打开所有弹出窗口的设置。如果用户启用了此选项,那么我认为您无能为力。如果这不是正在发生的事情,您可以发布一些代码或指向问题页面的链接吗?
2021-03-31 03:12:49
这在 Firefox 和 Chrome 等浏览器中不起作用。
2021-04-03 03:12:49
我可以覆盖 mozilla 浏览器的功能吗!!例如,在左键单击它会打开一个弹出窗口.... 但是对于中键单击它不会打开一个弹出窗口,并且会打开一个新选项卡,其中弹出窗口没有打开 .. 所以我想覆盖的中间单击功能Mozilla....
2021-04-10 03:12:49