HTML链接如何在右键或按住shift键的情况下执行JavaScript（在新窗口/标签页中打开）

Question

在新窗口/标签页中打开基于JavaScript的链接。

我有一个链接

<a href='/page' onclick='trackClick()'>Page</a>

我认为这里发生的情况是，在浏览器重定向到新页面之前，trackClick()函数可能没有足够的时间来执行。（顺便说一下：我错了吗？）

为了解决这个问题，我已经将HTML更改为

<a href='#' onclick='trackClick('/page')'>Page</a>

在发送信号到分析端点后，trackClick函数会重定向到下一页，以避免竞争条件。

因此，“shift+click”或“右键+在新窗口中打开”现在不会在新窗口/选项卡中打开/page。

如何最好地解决这个问题？浏览器在重定向到下一页之前不等待onclick事件完成的可能性有多大？

谢谢。

- Oleksandr

Answer 1

简短回答是：onclick != 右键单击。

这里有一个快速且简易的演示。

<script>
  function leftClick() {
    alert("click");
  }

  function rightClick() {
    alert("right click");
  }

  function mouseDown() {
    alert("Mouse down");
  }

  function mouseUp() {
    alert("Mouse up");
  }
</script>
<a href="http://www.google.com" onclick="leftClick()">CLick Me</a><br>
<a href="http://www.google.com" oncontextmenu="rightClick()">Right CLick Me</a><br>
<a href="http://www.google.com" onmousedown="mouseDown()">Any Click Me</a><br>
<a href="http://www.google.com" onmouseup="mouseUp()">Any Click Me</a><br>

所以你实际想要的是：

<a href='/page' onclick='trackClick()' oncontextmenu="trackClick()">Page</a>

Or maybe

<a href='/page' onmouseup='trackClick()' >Page</a> 

更好的方法是使用不显眼(unobtrusive)的处理程序以及 mousedown 和 mouseup 事件。

在重定向到下一页之前，浏览器不等待onclick事件完成的可能性有多大？

onclick 事件将会完成。如果你从单击处理程序中 return false，则导航将根本不会发生。 演示

- Jon P

---

可以说，contextmenu 也不是右键单击...你完全可以从其他输入触发 contextmenu（有些键盘有一个 contextmenu 键）。右键单击应该是 mousedown=>e.buttons===2 + mouseup=>e.buttons===2。 - Kaiido

@Kaiido，你说得对，我试图保持简单，也许我过于简化了。 - Jon P

实际问题在于你的代码无法追踪页面打开本身，如果用户多次打开上下文菜单，而没有点击“在新标签页/窗口中打开”，你将会追踪到错误的结果。（mouseup也是同样的情况，如果你不检查mousedown是否也在同一元素上进行了操作，你也会追踪到错误的点击） - Kaiido

是的，我们对trackClick()一无所知，它可能试图跟踪页面上单击的元素以引起导航事件，而不是目标页面加载。 - Jon P

谢谢大家。trackClick函数应该捕获用户点击链接的事实（无论是新标签/窗口、shift+点击还是普通点击），并向Google Analytics发送信号。这是让我担心的地方。如果浏览器重定向到一个新页面比分析库向GA发送信号更快，那该怎么办... - Oleksandr