窗口失去焦点时window.onblur不起作用

Question

我似乎无法使window.onblur正常工作。

window.onblur = console.log('blur');

当将监听器应用于窗口时，它仅在页面加载时运行，而不是在窗口失去焦点时运行。

- CJT3

Answer 1

Ryudice已经告诉你该做什么，但没有解释为什么它不能按你的方式工作。理解其原理将有助于你进一步确定如何继续。

原因是你的原始代码立即运行了console.log('blur')命令，并使用该调用的返回值作为窗口onblur事件。

console.log()的返回值因浏览器而异，但为了论证，假设它返回一个布尔true值。这意味着你的原始代码等同于编写以下代码：

window.onblur = true;

很明显，这不会按照你的期望工作。

你需要将window.onblur设置为一个函数，每次触发onblur事件时都会调用该函数。这可以通过将代码包装在function() {}中来实现，正如Ryudice的答案所示。

在简单情况下，您还可以通过不在要调用的函数名称上提供括号来实现。但是，此方法仅适用于您不想向函数传递任何参数的情况，因此不适合您的console.log示例。

希望有所帮助。如果你仍然感到困惑，网上有很多资源。尝试搜索“javascript passing functions as arguments”等短语，看看会出现什么结果。

- Spudley

Answer 2

window.onblur = function() { console.log('blur'); }

- ryudice

---

现在，如果用户切换标签页或点击地址栏，我该如何使它起作用？ - CJT3

@CharlesJohnThompsonIII 我认为这可能会解决问题，但你现在可能已经忘记了。我曾经遇到过类似的问题，这是我目前的解决方案。 - Steve

@CharlesJohnThompsonIII 请查看MDN上的页面可见性API。visibiltychange事件可能是您正在寻找的内容。 - Govind Rai

Answer 3

window.onblur = () => console.log( "blur" );

- karkael

---

是的，它会。这只是JavaScript的一个标准部分（在ES6（2015年）中添加），叫做“箭头函数”。 - Nebula