中间按钮点击事件 [英] Middle button click event

问题描述

我的Chrome扩展程序中有这么一小段代码，所以我可以使用< div href =url> 作为链接。
过去一直按预期工作直到最近。 （左 - 在当前选项卡中打开，中间 - 在新选项卡中打开）。现在它只注册左键单击。

$（b
$ b

  $（'div.clickable-href'）。on（'click'，function e）{
 switch（e.which）{
 case 1：
 window.location = $（this）.attr（'href'）; 
 break; 
案例2：
 window.open（$（this）.attr（'href'））; 
 break; 
案例3：
 break; 
} 
}）; 
  

我使用< div href =url> 和< span href =url> ，以便浏览器不显示状态栏。

我发现了一些类似的问题，但所有答案都建议使用 .on（'mousedown'，（e）=> {...}） 。我需要这个事件才会触发，只有当 mousedown 事件后面跟着一个 mouseup 事件时才会触发。

更令人沮丧的是，这个曾经工作，但它不再这样做。

---

编辑：

这是Chrome 55的一个问题。在Linux上（我第一次注意到这个异常），Chrome已经更新到v55。在我的Windows系统上，它是v54，并且中间点击正在工作。

解决方案

我注意到鼠标按钮＃3 的问题> in chrome（没有在其他浏览器上测试过）。

所以这里有一个修正（添加 contextmenu 触发事件）：

---

编辑

感谢MatevžFabjančičuse的有用评论。

我确认，自从 Chrome 55 （我在一分钟前更新之后）鼠标中点击现在触发新的 auxclick 事件。

因此，一个点击事件只能是由鼠标按钮1触发

注意> auxclick 由鼠标按钮2触发和3。

参考这里。

< .clickable-href'）。on（'click auxclick contextmenu'，function（e）{e.preventDefault（）;的console.log（e.which）;的console.log（e.type）;如果（e.type ==contextmenu）{console.log（上下文菜单阻止。）;返回; } switch（e.which）{case 1：//window.location = $（this）.attr（'href'）;的console.log（ 1）;打破;情况2：//window.open($(this).attr('href'））;的console.log（ 二）;打破;情况3：console.log（THREE）;打破; }}）;

  .clickable-href {width：20em ;背景色：#DDD;文本对齐：中心;填充：4em 0; border-radius：8px;}   
 < script src = https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"> ;</script><div class =clickable-href> CLICK ME  - 测试所有3个鼠标按钮！< / div>  

I have this bit of code in my Chrome extension, so I can use <div href="url"> as a link. This used to work as expected until recently. (Left - open in current tab, Middle - open in new tab). Now it only registers left clicks.

$('div.clickable-href').on('click', function(e) {
  switch(e.which) {
    case 1:
      window.location = $(this).attr('href');
      break;
    case 2:
      window.open($(this).attr('href'));
      break;
    case 3:
      break;
  }
});

I use <div href="url"> and <span href="url"> for links so the browser doesn't display the status bar.

I have found some similar questions, but all answers suggest using .on('mousedown', (e) => {...}). I need this event to trigger only if there was a mousedown event followed by a mouseup event.
What's even more frustrating is that this used to work, but it no longer does so.

---

EDIT:
This is an issue for Chrome 55. On Linux (where I first noticed the anomaly) Chrome was already updated to v55. On my Windows system, it was v54, and middle click was working. Updating from 54 to 55 caused the same problems.

解决方案

I noticed an issue with mouse button #3 in chrome (didn't test it on other browsers).

So here's a fix for it (add contextmenu to the triggering events):

---

EDIT
Thanks to Matevž Fabjančičuse's useful comment.

I confirm that since Chrome 55 (I updated to it a minute ago), the mouse middle click now triggers the new auxclick event.
So a click event can only be triggered by mouse button 1.

Notice that auxclick is triggered by mouse button 2 and 3.

Reference here.

$('div.clickable-href').on('click auxclick contextmenu', function(e) {
    e.preventDefault();
    console.log(e.which);
    console.log(e.type);
    
    if(e.type=="contextmenu"){
       console.log("Context menu prevented.");
       return;
    }
                           
    switch(e.which) {
        case 1:
            //window.location = $(this).attr('href');
            console.log("ONE");
            break;
        case 2:
            //window.open($(this).attr('href'));
            console.log("TWO");
            break;
        case 3:
            console.log("THREE");
            break;
    }
});

.clickable-href{
    width:20em;
    background-color:#DDD;
    text-align:center;
    padding:4em 0;
    border-radius:8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="clickable-href">
  CLICK ME - Test all 3 mouse buttons!
</div>

这篇关于中间按钮点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！