中间按钮点击事件

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会导致相同的问题。

- Matevž Fabjančič

---

请注意，用户可能希望在按住<Ctrl>键（Mac上为<Cmd>）进行主要单击时，您的“链接”也会在新标签页中打开。您还必须处理这些情况，以及其他可能无法预料的特定于平台的约定。尝试找到一种方法，使用真正的锚元素来创建您的链接，并让浏览器最好地处理它。 - Diego V

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>

- Louys Patrice Bessette

---

这只对我触发了1和3。我开始觉得这可能是Linux上Chrome的问题... - Matevž Fabjančič

这是Chrome 55的问题。在Linux上（我首次注意到异常情况），Chrome已经更新到v55。在我的Windows系统上，它是v54，并且中键单击可以正常工作。从54更新到55会导致相同的问题。 - Matevž Fabjančič

请使用 e.button 而不是非标准的 e.which。 - Diego V

@Diego：感谢评论，JavaScript的e.which可能不是W3C标准（这是他们在警告中所指的），但它仍然被所有主要浏览器广泛支持，除了IE 8及其之前的版本（我觉得这些已经过时了）。请参阅他们的浏览器兼容性表。请注意，e.button也不支持IE 8及其之前的版本。 - Louys Patrice Bessette

哦，对了，我忘记了那不是本地属性，而是jQuery的标准化属性。我的评论仅适用于本地事件处理。问候。 - Diego V

Answer 2

在Linux Chrome 55中，我遇到了以下事件： 鼠标按钮1：点击 鼠标按钮2：上下文菜单 中间鼠标按钮：辅助点击

- minlare