中键单击事​​件

Question

我的Chrome扩展程序中有这些代码,因此我可以将其<div href="url">用作链接.这曾经如预期的那样工作直到最近.(左 - 在当前选项卡中打开,中间 - 在新选项卡中打开).现在它只记录左键点击.

$('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;
  }
});

我使用<div href="url">和<span href="url">链接,因此浏览器不显示状态栏.

我发现了一些类似的问题,但所有答案都建议使用.on('mousedown', (e) => {...}).我只需要在mousedown事件后跟一个mouseup事件时触发此事件.
更令人沮丧的是,这曾经起作用,但它不再这样做了.

---

编辑:
这是Chrome 55的一个问题.在Linux上(我第一次注意到异常)Chrome已经更新到v55.在我的Windows系统上,它是v54,中间点击正在运行.从54更新到55导致了同样的问题.

Answer 1

我注意到chrome中的鼠标按钮#3存在问题(未在其他浏览器上测试).

所以这是一个修复它(添加contextmenu到触发事件):

编辑
感谢MatevžFabjančičuse的有用评论.

我确认自从Chrome 55(我在一分钟前更新到它)后,鼠标中间点击现在会触发新auxclick事件.
因此,click只能通过鼠标按钮1触发事件.

请注意,auxclick由鼠标按钮2和3触发.

参考这里.

$('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>

Answer 2

在 Linux Chrome 55 中，我会发生以下事件：

鼠标键 1：click
鼠标键 2：contextmenu
鼠标中键：auxclick