触发（中）单击链接的本机浏览器行为 [英] Trigger native browser behavior for (middle) click on a link
问题描述
我想触发（中）鼠标点击链接，以触发此事件的本机浏览器行为。
I want to trigger a (middle) mouse click on a link, in a way that triggers the native browser behavior for this event.
例如在我使用的浏览器中，中键单击将导致链接页面在后台的新选项卡中打开。
E.g. in those browsers I work with, middle-click will cause the linked page to open in a new tab in the background.
但是如果其他浏览器有不同的行为，那么应该被触发。
But if other browsers have a different behavior, that should be triggered instead.
我知道有 element.click（）; 方法，但我该怎么做告诉它应该点击哪个鼠标按钮？
I know there is the element.click(); method, but how do I tell it which mouse button should be clicked?
背景是我想做一个div像常规链接一样尽可能地表现。我的想法是创建一个隐藏的链接标记并触发本机浏览器行为。
The background is that I want to make a div behave as much as possible like a regular link. The idea was that I would create a hidden link tag and trigger the native browser behavior.
div-as-a-links的要求：
Requirements for the div-as-a-link:
- href可以来自data-href属性。
- 左键单击，中键单击和可能的本机浏览器行为右键单击。
- 尊重目标属性，该属性可能来自数据目标属性。
- tabindex
- 使用键盘激活？
- 可以在div中选择文本片段。这意味着我们不能只使用叠加层。
- href can come from a data-href attribute.
- Native browser behavior for left-click, middle-click and possibly right-click.
- respect of the target attribute, which could come from a data-target attribute.
- tabindex
- activation with the keyboard?
- possibility to select text snippets within the div. This means we cannot just use an overlay.
为什么不使用原生链接标记？因为div包含内部< a> 标记。因此，将div框设为a-tag会导致嵌套的a-tags会导致某些浏览器重构DOM树。
Why not use a native link tag? Because the div contains inner <a> tags. So making the div box an a-tag would cause nested a-tags which would cause some browsers to restructure the DOM tree.
显然我可以设置document.location。 href点击。但这只是浏览器本机行为的20％。
Obviously I could just set document.location.href on click. But this is only 20% of the browser's native behavior.
我也可以尝试检测鼠标按钮，并使用js在后台打开选项卡，如果它是中间按钮。
I could also try to detect the mouse button, and use js to open the tab in the background, if it was the middle button.
但也许某些浏览器的中间点击有不同的行为。我宁愿让浏览器做它的事情，而不是试图用js复制特定的浏览器行为。
But maybe some browsers have a different behavior for middle-click. I would rather let the browser do its thing, than trying to replicate a specific browser behavior with js.
我的想法是创建一个隐藏的< a> 标记具有相同的href，并将< div> 中的点击事件委托给此隐藏的 < a> 标记。为此，我需要使用相同的鼠标按钮触发事件。我不知道该怎么做。
The idea I had was to create a hidden <a> tag with the same href, and delegate click events from the <div> to this hidden <a> tag. For this, I need to trigger the event with the same mouse button. I am not sure how to do this.
jQuery可供个人使用案件。但是为了让这个对更广泛的受众有用，如果你知道的话，也可以在没有jQuery的情况下发布如何做到这一点。
jQuery is ok for my personal use case. But to make this useful to a wider audience, maybe also post how to do it without jQuery, if you know.
有一些问题可以解决这类问题，但每个问题都有不同的角度或有不同的约束条件。
There are some question which deal with this kind of problem, but each of them looks at a different angle or has different constraints.
推荐答案
这是我想出的，感谢评论中的@JonUleis和 https：// stackoverflow中的@MikeWillis .com / a / 32868971/246724
This is what I come up with thanks to @JonUleis in the comments and @MikeWillis in https://stackoverflow.com/a/32868971/246724
$('.linkbox', context).once('linkbox').each(function(e){
var $linkbox = $(this);
var href = $linkbox.data('href');
if (!href) {
return;
}
var $hiddenLink = $('<a>').attr('href', href).hide().appendTo('body');
$linkbox.click(function(e){
$hiddenLink[0].dispatchEvent(new MouseEvent('click', {button: e.button, which: e.which}));
e.preventDefault();
});
});
请注意，我将隐藏的链接放在点击的div之外，以防止递归。
Note that I put the hidden link outside of the clicked div, to prevent recursion.
右键菜单不会给我复制链接网址，但我想这很难复制。
The right-click menu does not give me "copy link url", but I imagine this would be really hard to replicate.
更新：我发现我不需要将链接附加到任何内容，它仍然有效。但到目前为止，我只在Linux上的Chromium中测试了它。
UPDATE: I found that I don't really need to append the link to anything, and it still works. But I only tested this in Chromium on Linux so far.
这篇关于触发（中）单击链接的本机浏览器行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
