Question

问题

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

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

但是如果其他浏览器有不同的行为，那么应该触发它。

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

背景

背景是我希望像常规链接一样尽可能地使div表现出来。我的想法是创建一个隐藏的链接标记并触发本机浏览器行为。

div-as-a-link的要求：

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

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

显然我可以在点击时设置document.location.href。但这仅占浏览器本地行为的20％。

我还可以尝试检测鼠标按钮，并使用js打开背景中的标签，如果它是中间按钮。

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

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

js或jQuery？

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

另见

有一些问题可以解决这类问题，但每个问题都有不同的角度或有不同的约束。

Answer 1

这是实现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
    }
   }
});

Answer 2

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

>>> for word in uni_stripped_words:
        print word


    Name XYZ
    CTS SANSKRUTI LAYOUT, 90 FEET RAOD, THAKUR  COMPLEX,
    KANDIVALI EAST,
    Mumbai  MAHARASHTRA-400101
    Name ABC
    DUT WITHOUT LAYIN, 45 FOOT AODR, RUKTHA  SIMPLE,
    BOMBAY WEST,
    BOMBAY RASHTRAMAHA-400101 # Sorry for the weird text example haha

请注意，我将隐藏的链接放在单击的div之外，以防止递归。

右键菜单不会给我“复制链接网址”，但我想这很难复制。

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

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

问题

背景

js或jQuery？

另见

2 个答案: