用_blank打开window.open在Firefox中打开两个选项卡 [英] window.open with _blank opens two tabs in Firefox
问题描述
在单击此元素时:
// 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> <strong class="title">Client Name</strong>
</a>
将调用此处理程序，当它进入window.open时，将打开两个选项卡.第一个是所需的URL(变量URL).第二个是在锚元素上设置的原始href，这是不希望的.我正在呼叫preventDefault.我想念什么?
它是可复制的.请参见下面的链接.有时是两次中间点击.这是一个中键.它仅在 Firefox 中发生.
https://jsfiddle.net/jsmunroe/eap1b6k7/3/
我正在使用Firefox 68.0.2.
我想您的目标是拦截试图在新标签页中打开链接的用户，而在其中打开不同链接一个新标签.如果我是对的，那么您将需要通过一些关键方式来调整策略:
-
请勿使用
mousedown点击事件是由鼠标按下事件和鼠标按下事件触发的.这意味着通常您必须先按下并释放按钮，然后再进行任何点击类型的操作，无论是导航(左键单击)，上下文菜单(右键单击)或在新标签页中打开(单击鼠标中键).如果您尝试使用mousedown进行模拟，则会感到很奇怪-动作将为时过早！
而且，正如您现在所观察到的那样，它将无法正常工作:处理程序运行后 仍然会发生相应的click事件，因为您没有取消正确的事件.您的
preventDefault()/return false完成什么 ?好吧，请尝试按住中间按钮并拖动:大多数浏览器可能会在移动鼠标时在视图周围平移，但是如果您在"Middle Click Me"元素上尝试此操作……则不会发生任何事情.是的，您只是成功地使页面上的滚动变得有些烦人. -
请使用
auxclick事件.我猜想您首先使用
mousedown是因为您观察到捕获click事件时，单击中间没有触发任何事件.几年前，click可以正常工作-但现在，click只为 primary 鼠标按钮触发. 这是一件好事！，当很多人只打算捕获左键单击时，他们会无意中捕获click来阻止右键单击和中键单击.据推测，如果您正在捕获auxclick，您就知道自己在做什么，并且可以信任它来正确处理它. (所以，你知道...要小心)
w3c实际上在所有这些方面都有相当不错的文档，因此如果我不链接到它，并在这里引用相关的内容，我会很失落:
仅应为主指针按钮触发click事件(即，当按钮值为0时，按钮值为1).辅助按钮(如标准鼠标的中键或右键)不得触发点击事件.有关与非主要按钮相关联的相应事件，请参见auxclick.
单击事件可以在同一元素上的mousedown和mouseup事件之前，而不必考虑其他节点类型(例如，文本节点)之间的变化.根据环境配置，如果在按下和释放指针设备按钮之间发生以下一种或多种事件类型mouseover，mousemove和mouseout，则可以调度click事件.点击事件也可以跟在dblclick事件之后.
最后，这是上面所做更改的摘要，供您审核(您实际上无法在此处进行测试，
// 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> <strong class="title">Client Name</strong>
</a>
是的-唯一的更改是mousedown-> auxclick！享受...
进一步阅读
When this element is middle clicked:
// 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> <strong class="title">Client Name</strong>
</a>
This handler is called and when it gets to window.open, two tabs are opened. The first is the URL (variable URL) which is desired. The second is the original href set on the anchor element which is undesired. I'm calling preventDefault. What am I missing?
It is reproducible. See the link below. Sometimes it is two middle clicks. It is a middle click. It only happens in Firefox.
https://jsfiddle.net/jsmunroe/eap1b6k7/3/
I'm using Firefox 68.0.2.
I guess your goal here is to intercept the user trying to open a link in a new tab and instead open a different link in a new tab. If I'm correct, then you're going to need to adjust your strategy in a few key ways:
Don't use
mousedownClick events are triggered by a mouse-down followed by a mouse-up event. That means that normally you have to press and release the button before any click-type thing happens, whether that's navigation (left-click), context menu (right-click) or open in new tab (middle-click). If you try to simulate this using mousedown, it's gonna feel weird - the action will happen too soon!
Also, as you've now observed, it won't work correctly: the corresponding click event will still happen after your handler runs, because you're not cancelling the right event. What does your
preventDefault()/return falseaccomplish? Well, try holding the middle button down and dragging: most browser will probably pan around the view as you move your mouse, but if you try this on your "Middle Click Me" element... Nothing happens. Yep, you've only succeeded in making your page slightly more annoying to scroll around on.DO use the
auxclickevent.I'm guessing you went with
mousedownin the first place because you observed that nothing fired for a middle click when you captured theclickevent. A few years ago,clickwould've worked fine - but now,clickonly fires for the primary mouse button. This is a good thing! Way too many people inadvertently blocked right- and middle-clicks by capturingclick, when they only intended to capture left-clicks. Presumably if you're capturingauxclick, you know what you're doing and can be trusted to handle it properly. (so, y'know... Do be careful)
The w3c actually has rather good documentation on all of this, so I'd be remiss if I didn't link to it and quote the relevant bits here:
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.
Finally, here's your snippet with the changes above, for your review (you can't actually test it here, since window.open is blocked in Snippets - but you'll get an error indicating this and not see any tabs open; paste it into your fiddle for a real test):
// 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> <strong class="title">Client Name</strong>
</a>
Yep - the only change is mousedown -> auxclick! Enjoy...
Further reading
- Middle button click event
- UI Events - event type click - W3C Editor's Draft
- Element: auxclick event on MDN
这篇关于用_blank打开window.open在Firefox中打开两个选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
