触发（中）单击链接的本机浏览器行为

Question

问题

我想触发（中间）鼠标单击链接，以触发此事件的本机浏览器行为。

例如在我使用的那些浏览器中，中键单击将导致链接页面在后台的新选项卡中打开。

但如果其他浏览器有不同的行为，则应改为触发。

我知道有element.click(); 方法，但我如何告诉它应该点击哪个鼠标按钮？

背景

背景是我想让 div 的行为尽可能像常规链接一样。我的想法是我会创建一个隐藏的链接标签并触发本机浏览器行为。

div-as-a-link 的要求：

• href 可以来自 data-href 属性。
• 左键单击、中键单击和可能的右键单击的本机浏览器行为。
• 尊重目标属性，这可能来自数据目标属性。
• 标签索引
• 用键盘激活？
• 可以在 div 中选择文本 sn-ps。这意味着我们不能只使用叠加层。

为什么不使用原生链接标签？因为 div 包含内部 <a> 标签。因此，将 div 框设置为 a-tag 会导致嵌套 a-tags，这会导致某些浏览器重构 DOM 树。

显然我可以在点击时设置 document.location.href。但这只是浏览器原生行为的 20%。

我也可以尝试检测鼠标按键，如果是中键的话，用js在后台打开标签。

但也许有些浏览器对中键点击有不同的行为。我宁愿让浏览器做它的事情，也不愿尝试用 js 复制特定的浏览器行为。

我的想法是创建一个具有相同href 的隐藏<a> 标签，并将来自<div> 的点击事件委托给这个隐藏的<a> 标签。为此，我需要使用相同的鼠标按钮触发事件。我不知道该怎么做。

js 还是 jQuery？

jQuery 适用于我的个人用例。但是为了让更广泛的受众有用，如果你知道的话，也许也可以发布如何在没有 jQuery 的情况下做到这一点。

另见

有一些问题处理这类问题，但每个问题的角度不同或有不同的约束。

Answer 1

感谢 cmets 中的@JonUleis 和 https://stackoverflow.com/a/32868971/246724 中的 @MikeWillis，这是我的想法

  $('.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 之外，以防止递归。

右键菜单没有给我“复制链接网址”，但我想这真的很难复制。

更新：我发现我真的不需要将链接附加到任何东西，它仍然有效。但目前我只在 Linux 上的 Chromium 中测试过。

Answer 2

这是实现left click 和middle click 功能的代码。 tabindex 适用于任何 html 元素，因此您可以使用它而不是 div

$("#link").on('click', function(e) {
  const hasTargetBlank = $(this).data('target') === '_blank';
  const href = $(this).data('href');

  switch(e.which) {
    // left click
    case 1: {
      if (hasTargetBlank) {
        window.open(href);
      } else {
        window.location = href;
      }
      break;
    }
    // middle click
    case 2: {
      window.open(href);
      break;
    }
    // right click
    case 3: {
      // do what you want to do
    }
   }
});