javascript - Internet Explorer 焦点在 addEventListener 触发焦点之前？

Question

今天我偶然发现了一个奇怪的 Internet Explorer 怪癖。我调用元素的焦点函数，然后绑定(bind)事件监听器。在所有浏览器中，它都按时间顺序执行，但在 IE 中却不是。

我有这段代码:

var t = document.getElementById('focusable');
t.focus();
t.addEventListener('focus', function() {
  alert('This should only happen after the second focus.');
});

<input id="focusable">

我的问题是:
为什么会发生这种情况？ 以及如何在没有 setTimeout(fn,0); hack 的情况下解决它。

注意:我使用的是 IE11

Answer 1

Why does this happen?

大概是因为 IE 在 JavaScript 线程返回给浏览器之前实际上并没有给予元素焦点。

and how can I solve it without a setTimeout(fn,0); hack.

在这种情况下使用 setTimeout 似乎是正确的做法，而不是 hack。 但如果它不起作用，则不是。 :-)

我不想这么说，但听起来您可能需要一个标志并有意确保第一个焦点触发您的处理程序:

(function() {
  var flag = false;
  var t = document.getElementById('focusable');
  t.blur();
  t.addEventListener('focus', function() {
    if (!flag) {
      flag = true;
    } else {
      console.log('This should only happen after the second focus.');
    }
  }, false);
  t.focus();
})();

<input id="focusable">