用_blank打开window.open在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）。第二个是在锚元素上设置的原始href，这是不希望的。我在打电话preventDefault。我想念什么？

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

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

我正在使用Firefox 68.0.2。

Answer 1

我想您的目标是拦截试图在新标签页中打开链接的用户，而不是在新标签页中打开其他链接。如果我是对的，那么您将需要通过一些关键方式来调整策略：

1. 不要使用 mousedown

   单击事件由鼠标按下和鼠标向上事件触发。这意味着通常您必须在按下任何类型的事件之前按下并释放按钮，无论是导航（左键单击），上下文菜单（右键单击）还是在新选项卡中打开（单击中键）。如果您尝试使用mousedown进行模拟，那会感觉很奇怪 -动作太早发生了！

   而且，正如您现在所观察到的那样，它将无法正常工作：处理程序运行后，相应的click事件仍然会发生，因为您没有取消正确的事件。什么没有你preventDefault()/ return false完成？好吧，请尝试按住中间按钮并拖动：大多数浏览器可能会在移动鼠标时在视图周围平移，但是如果您在“ Middle Click Me”元素上尝试此操作……则不会发生任何事情。是的，您只是成功地使页面上的滚动变得有些烦人。

2. 请使用auxclick事件。

   我猜您mousedown是第一个加入的，因为您发现捕获click事件时没有看到中间点击触发任何事件。几年前，click效果还不错-但现在，click只有主鼠标按钮才会触发。这是一件好事！当太多人click只打算捕获左键单击时，会无意中通过捕获来阻止右键单击和中键单击。据推测，如果您正在捕获auxclick，那么您就知道自己在做什么，并且可以信任地正确处理它。（所以，你知道...要小心）

w3c实际上在所有这些方面都有相当不错的文档，因此如果我没有链接到它并在此处引用相关的内容，那我将不屑一顾：

仅对主指针按钮触发click事件（即，当按钮值为0时，按钮值为1）。辅助按钮（如标准鼠标的中键或右键）不得触发点击事件。有关与非主要按钮关联的相应事件，请参见auxclick。

在单击事件之前，可以在同一元素上单击mousedown和mouseup事件，而忽略其他节点类型（例如，文本节点）之间的更改。根据环境配置，如果在按下和释放指针设备按钮之间发生以下一种或多种事件类型mouseover，mousemove和mouseout，则可以调度click事件。点击事件也可以跟在dblclick事件之后。

最后，这是您所做的上述更改的摘录，供您审核（由于window.open在代码段中被屏蔽，因此您无法在此处进行实际测试-但您会收到一条错误消息，指出未打开任何标签；将其粘贴到小提琴中进行真正的测试）：

// 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！请享用...

进一步阅读

• 中键单击事​​件
• UI事件-事件类型单击-W3C编辑器的草稿
• 元素：MDN上的auxclick事件