javascript - 切换选项卡/窗口时忽略模糊/聚焦事件

Question

我有一个表单，只要其中一个字段被聚焦(即用户单击或使用标签进入它)，就会显示一个包含有关该字段的额外信息的 div。很简单:onFocus套display: none;在此信息 Pane 中，以及 onBlur删除它。

我只希望在单击同一页面上的其他元素时触发这些事件，但在切换到另一个窗口或选项卡时它们也会触发。每次你都看到页面上来来去去的内容 super 烦人<Alt>-<Tab> .

JS有没有办法区分这两种模糊事件？

编辑: I made a codepen to illustrate the problem .打开它，单击文本输入字段，然后用 alt-tab 键切换到另一个窗口，可以看到一些文本消失了。

这是有问题的代码:

<input id="foo" />

<p>
  Lorem ipsum dolor <span id="bar">sit amet consectetur</span>
</p>

.hidden {
  display: none;
}

const inputField = document.getElementById('foo')
const hiddenSpan = document.getElementById('bar')

inputField.addEventListener('focus', () => hiddenSpan.classList.add('hidden'))
inputField.addEventListener('blur', () => hiddenSpan.classList.remove('hidden'))

Answer 1

窗口模糊时的预期行为是保留输入的焦点。

调查显示，当取消选择窗口时，首先向事件元素发送模糊事件，然后向窗口发送模糊事件。

这两个blur事件快速连续发生，因此您可以利用这一点在适当的时候重新聚焦输入:

记录最后一次输入模糊的时间

拦截窗口模糊事件

如果输入模糊和窗口模糊之间的时间很短，重新聚焦输入

工作示例:

  const inputField = document.getElementById('input');
  const inputSpan = document.getElementById('bar');
  const windowSpan = document.getElementById('window-span');

  let inputBlurTime = 0;

  inputField.addEventListener('focus', () => {
    inputSpan.innerHTML = ' FOCUSED';
  });

  inputField.addEventListener('blur', evt => {
    inputSpan.innerHTML = ' BLURRED';
    inputBlurTime = new Date().getTime();
  });

  window.addEventListener('focus', () => {
    windowSpan.innerHTML = ' FOCUSED';
  });

  window.addEventListener('blur', () => {
    windowSpan.innerHTML = ' BLURRED';
    const windowBlurTime = new Date().getTime();
    if (windowBlurTime - inputBlurTime < 100) {
      windowSpan.innerHTML += ' (re-focusing input)';
      inputField.focus();
      inputSpan.innerHTML = ' RE-FOCUSED';
    }
  });

<h4>Preserve Input Focus on Window Blur</h4>
<input id="input" />

<p>Input <span id="bar">INIT</span></p>
<p>Window <span id="window-span">INIT</span></p>