[解決済み] [Solved] 'blur'イベントが発生したとき、フォーカスがどの要素に*行ったかを調べるにはどうすればよいですか？

質問

を付けるとします。 blur 関数は、HTMLの入力ボックスに次のような形で追加されます。

<input id="myInput" onblur="function() { ... }"></input>

を発生させた要素のIDを取得する方法はありますか？ blur イベントが発生した（クリックされた要素）関数の内部で？どのように？

例えば、このようなスパンがあったとします。

<span id="mySpan">Hello World</span>

input要素にフォーカスが当たった直後にspanをクリックすると、input要素にフォーカスが当たらない。この関数はどのようにして、それが mySpan がクリックされたのでしょうか？

PS: もしspanのonclickイベントがinput要素のonblurイベントの前に発生すれば、私の問題は解決します。なぜなら、特定の要素がクリックされたことを示す何らかのステータス値を設定できるからです。

PPS: この問題の背景は、AJAXオートコンプリートコントロールを外部（クリック可能な要素）からトリガーしてそのサジェストを表示したいのですが、サジェストが blur イベントが発生します。そこで blur 関数で、ある特定の要素がクリックされたかどうかを調べ、クリックされた場合はblurイベントを無視します。

解決方法は？

うーん...。Firefoxでは explicitOriginalTarget をクリックすると、クリックされた要素が引き出されます。と思っていたら toElement を使えばIEでも同じことができるのですが、うまくいかないようです...。ただし、新しくフォーカスされた要素をドキュメントから引き出すことはできます。

function showBlur(ev)
{
   var target = ev.explicitOriginalTarget||document.activeElement;
   document.getElementById("focused").value = 
      target ? target.id||target.tagName||target : '';
}

...

<button id="btn1" onblur="showBlur(event)">Button 1</button>
<button id="btn2" onblur="showBlur(event)">Button 2</button>
<button id="btn3" onblur="showBlur(event)">Button 3</button>
<input id="focused" type="text" disabled="disabled" />

注意事項 このテクニックは ではなく によるフォーカスの変化に対して機能します。 タビング キーボードでフィールドを操作した場合、ChromeやSafariでは全く機能しません。の大きな問題点は activeElement (IEを除く)一貫して更新されないということです。 後 は blur イベントが処理され、処理中に有効な値を全く持たなくなる可能性があります! これは、次のようなバリエーションで緩和できます。 Michielが最終的に使用したテクニック :

function showBlur(ev)
{
  // Use timeout to delay examination of activeElement until after blur/focus 
  // events have been processed.
  setTimeout(function()
  {
    var target = document.activeElement;
    document.getElementById("focused").value = 
      target ? target.id||target.tagName||target : '';
  }, 1);
}

これは、ほとんどのモダンブラウザで動作するはずです（Chrome、IE、Firefoxでテスト済み）。 クリック (タブで移動した場合と比較して)。