javascript - window.open with _blank 在 Firefox 中打开两个标签

Question

当这个元素被中间点击时:

// Allow middle button click to open client in another tab.
$(document).on('mousedown', '.clientlist-edit', function (event) {
    if (event.which === 2) {
        event.preventDefault();

        var url = $(this).attr('href');
        url = url.toLowerCase().replace('/addedit', '/clientindex');
        window.open(url, '_blank');

        return false;
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="clientlist-edit" href="/Clients/Management/AddEdit/4ffac190-72d2-476a-b0be-a9d90097272a">
    <i class="glyphicon glyphicon-pencil"></i>&nbsp;<strong class="title">Client Name</strong>
</a>

调用此处理程序，当它到达 window.open 时，将打开两个选项卡。第一个是所需的 URL(变量 URL)。第二个是在不希望的 anchor 元素上设置的原始 href。我正在调用 preventDefault。我错过了什么？

它是可重现的。请参阅下面的链接。有时是两次中间点击。这是一个中间点击。它只发生在 Firefox 中。

https://jsfiddle.net/jsmunroe/eap1b6k7/3/

我使用的是 Firefox 68.0.2。

Answer 1

我想您的目标是拦截试图在新选项卡中打开链接的用户，而不是在新选项卡中打开一个不同链接。如果我是正确的，那么您将需要在几个关键方面调整您的策略:

1. 不要使用mousedown

   点击事件由鼠标按下和鼠标弹起事件触发。这意味着通常您必须在任何点击类型发生之前按下并释放按钮，无论是导航(左键单击)还是上下文菜单(右键单击)或在新标签页中打开(单击鼠标中键)。如果您尝试使用 mousedown 来模拟此操作，您会感觉很奇怪 - 操作发生得太快了!

   此外，正如您现在观察到的那样，它不会正常工作:相应的点击事件仍会在您的处理程序运行后发生，因为您没有取消正确的事件。您的 preventDefault()/return false 完成了什么？好吧，尝试按住中间按钮并拖动:大多数浏览器可能会在您移动鼠标时平移 View ，但是如果您在“中间单击我”元素上尝试此操作……什么也没有发生。是的，您只是成功地让您的页面在滚动时更加烦人。

2. 请务必使用 auxclick 事件。

   我猜您首先选择了 mousedown，因为您观察到当您捕获 click 事件时没有触发中间点击。几年前，click 可以正常工作 - 但现在，click 只会触发 primary 鼠标按钮。 这是一件好事!太多的人无意中通过捕获 click 阻止了右键单击和中间单击，而他们只想捕获左键单击。据推测，如果您正在捕获 auxclick，您就会知道自己在做什么，并且可以相信可以正确处理它。 (所以，你知道……一定要小心)

The w3c actually has rather good documentation on all of this ，所以如果我没有链接到它并在此处引用相关位，那将是我的疏忽:

The click event should only be fired for the primary pointer button (i.e., when button value is 0, buttons value is 1). Secondary buttons (like the middle or right button on a standard mouse) MUST NOT fire click events. See auxclick for a corresponding event that is associated with the non-primary buttons.

The click event MAY be preceded by the mousedown and mouseup events on the same element, disregarding changes between other node types (e.g., text nodes). Depending upon the environment configuration, the click event MAY be dispatched if one or more of the event types mouseover, mousemove, and mouseout occur between the press and release of the pointing device button. The click event MAY also be followed by the dblclick event.

最后，这是包含上述更改的代码片段，供您查看(您实际上无法在此处测试它，since window.open is blocked in Snippets - 但您会收到一条错误提示并且看不到任何选项卡打开；将其粘贴到您的 fiddle 中进行真正的测试):

// Allow middle button click to open client in another tab.
$(document).on('auxclick', '.clientlist-edit', function (event) {
    if (event.which === 2) {
        event.preventDefault();

        var url = $(this).attr('href');
        url = url.toLowerCase().replace('/addedit', '/clientindex');
        window.open(url, '_blank');

        return false;
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="clientlist-edit" href="/Clients/Management/AddEdit/4ffac190-72d2-476a-b0be-a9d90097272a">
    <i class="glyphicon glyphicon-pencil"></i>&nbsp;<strong class="title">Client Name</strong>
</a>

是的 - 唯一的变化是 mousedown -> auxclick!享受...

进一步阅读

• > Middle button click event
• > UI Events - event type click - W3C Editor's Draft
• > Element: auxclick event on MDN