javascript - 当用户切换到一个完全不同的窗口时，有什么方法可以避免 focusout 事件吗？

Question

我正在使用

$('#input').blur(function(){...

为了处理在我的网络应用程序中失去对输入的关注。

它在大多数情况下都按预期运行，除了我不希望在用户完全切换到另一个窗口时触发该事件。我注意到即使切换到我的 chrome 开发工具也会触发模糊事件。此行为是无意的。我还应该提到，使用 focusout 事件会产生相同的结果。

作为我想要的示例，您会注意到，如果您在 google 上搜索内容，当您点击离开输入时似乎会出现 focusout 事件，这会使建议的搜索消失。 但是，如果您单击一个不是您的浏览器的完全不同的窗口，结果将保留在屏幕上，就好像没有触发 focusout 一样。有什么方法可以做到这一点吗？

Answer 1

不幸的是，输入的模糊是最先触发的事件之一，甚至在窗口的一个或任何 visibilitychange 事件触发之前。

这意味着我们需要延迟此输入事件的所有执行，以确保它不是由窗口模糊引起的。为此，只需存储一个超时 ID，您将在窗口的模糊事件处理程序中取消该 ID。

let blur_timeout;
window.addEventListener( 'blur', (e) => {
  clearTimeout( blur_timeout ); // cancel the input's timer
} );
document.getElementById( 'inp' ).addEventListener( 'blur', (e) => {
  // wait a bit so we are sure it's not caused by window's blur
  blur_timeout = setTimeout( handleInputBlur, 10 );
} );

function handleInputBlur() {
  console.log( 'input blurred' );
}

<input id="inp">