在 Firefox 中，JavaScript 事件 onblur 在 onfocus 之前触发

Question

我在 Firefox 中使用文本框的 onblur 和 onfocus 事件时遇到问题。

在歌剧中。它按预期工作(例如，首先调用 onfocus，然后调用 onblur)。

在 Firefox 中，首先调用 onblur，然后调用 onfocus。这不应该发生。

如何解决这个问题？

Answer 1

很高兴知道某些浏览器以这种方式损坏。考虑以下代码。

<input type="text" id="t1" onfocus="is_editing=true" onblur="is_editing=false" />
<input type="text" id="t2" onfocus="is_editing=true" onblur="is_editing=false" />

在 Opera 中，如果您单击任一文本字段，is_editing 将为真。如果您然后切换到另一个文本字段... is_editing 将为 false!

如果您将上述变量赋值替换为函数调用，也会发生同样的情况:enableEditing() 和 disableEditing()，例如:您从一个字段切换到另一个字段，并且编辑被禁用。这显然不是人们想要的!

为了避免这种情况，大多数浏览器现在都支持 document.activeElement，您需要使用它来做一些非常讨厌的事情，例如:

function enableEdit() { is_editing = true; }

/* Can't just unset is_editing here, since broken browsers may
call onblur /after/ onfocus when tabbing between two text elements.
So, we only unset if we don't have a text element focused */
function disableEdit() {
  if (!document.activeElement) {
    /* For old & broken browser support, could traverse every DOM elem to set
    elem.onfocus = function(){ document.activeElement = elem; }
    For the meantime, I just assume they aren't broken. */
    is_editing = false;
  }
  // If not focused on a text input type, then it's OK to unset.
  else if ("text" != document.activeElement.type) {
    is_editing = false;
  }
}

显然，将 is_editing 赋值替换为您希望在 blur/onfocus 上发生的任何事情。

使用 jQuery，您显然也可以使用 $("*:focus")，就像我在上面使用 document.activeElement 一样。