如何确定选择了浏览器选项卡并用JavaScript执行代码

Question

我想在多个浏览器选项卡上打开一个相同的页面。当我点击一个浏览器选项卡时，我希望JavaScript函数执行一次，只执行一次！这并不是说该功能被执行了三次，因为例如，同一个页面在三个浏览器选项卡上打开。

我试过：

window.addEventListener("focus", () => {
console.log(document.hasFocus());
});

如果光标聚焦在web浏览器上并在该浏览器上的选项卡之间切换，则此操作效果良好。

但是，如果您首先将光标集中在网络浏览器之外的其他东西上(例如，计算机桌面或代码IDE(，然后单击非活动浏览器选项卡，则上面的代码将执行两次，一次由上一个活动选项卡执行，另一次由您刚刚单击的新活动选项卡执行。

这是我的问题。

如何在单击web浏览器选项卡时只执行一次JavaScript代码？除了JavaScript代码之外，任何解决方案都是受欢迎的，例如跟踪像素或输入字段自动对焦事件，仅举几个例子。我并不是说追踪像素技术会有帮助。我没有使用jQuery。我正在使用VueJs。

Answer 1

在采用这种古老的方法和JS语法作为最终的编码风格之前，您可能需要使用它。有一些经典的香草味。它永远不会痛。

document.body.onfocus = function(e){console.info(e.type)}

should work exactly as requested...
but since this behavior is somewhat tied to the BOM, some browser vendors (with idiosyncratic behaviors) might require some sort of enforced filtering,  Opera comes to mind. 
But it should be rock solid on all modern browsers including a bonus backward compatibility, as back as Windows 98 browser version. Andor the ancient and now probably forgoten NN 4.7. ( except for the console info event log, but that's not needed for the actual use anyway )