Firefoxでonfocusの前にJavaScriptイベントonblurが発生しています

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" /> 

あなたがいずれかのテキストフィールドをクリックした場合、is_editingはtrueになります。あなたが他のテキストフィールドにタブしたら... is_editingは間違っています！

上記の変数代入を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; 
    } 
} 

もちろん、あなたがのonblur/ONFOCUSが起こると思ったものは何でもしてis_editingの割り当てを交換してください。

jQueryでは、上記のdocument.activeElementと同じ方法で、明らかに$("*:focus")を使用することができます。