javascript - 在浏览器中打开新选项卡时出现问题

Question

对于一些交互式图形，我们在 HTML 页面中使用 Canvas 。在 Canvas 内部，我们有“类似链接”的控件，可以将用户链接到外部资源。由于 Canvas 的原因，我们不使用 <a href="">标签，但我们通过 JS 代码打开新的浏览器选项卡，如下所示:

this.pixiLayout.App.renderer.view.addEventListener('click', () => {
    if (this.pixiLayout.externalUrl) {
        window.open(this.pixiLayout.externalUrl, '_blank');
    }
});

问题:Google Analytics(前端)向我们展示的点击次数比来自第三方资源的实际“页面浏览量”分析多得多，高达 10-20 倍。这意味着用户点击了链接(并由 GA 记录)，但由于某种原因，链接未打开，或打开但未加载到新选项卡中。我了解广告/弹出窗口拦截器。这可能是某些用户的情况。但并不是像我们一样，90% 的用户都遇到这种情况。

我们无法在我们拥有的任何设备上重现此行为。

问题:这是否是由正常的浏览器策略或限制引起的，可能会导致像我们的情况一样阻止新选项卡？难道它就像我还不知道的现代浏览器的“新功能”？

Answer 1

好的，问题出在我们自己的代码中。 GA 的事件触发(我们使用自定义事件)是在代码中与实际操作不同的位置实现的 - window.open()。它们应该在相同的用户操作(用户单击)上被调用。但事实并非如此，特别是对于移动设备而言。当用户点击该交互式链接式控件并向上或向下移动手指(用于滚动)时，它会触发负责跟踪“单击”的自定义事件。但在这种情况下，实际的“click”事件不会被触发。

结论:永远不要在一个地方执行实际操作，然后在代码的另一位置“收集该操作的分析”。