DOMノードのフォーカスとブラーイベントの処理

Question

私はinput type=textコントロールTを持っています。フォーカスすると、JavaScriptがdivのUIエレメントEを表示するように実行されます。

Tがぼやけると、Eはonblurコールバックによって隠されます。

しかし、ユーザがEをクリックすると、もちろんTはぼやけますが、この場合はEを非表示にしたくありません。

onblurコールバックのTでは、通常のぼかしとぼかしの間でコントロール内のどこかを区別できますか？

私はdocument.activeElementを試しましたが、これは私には役に立たないbody要素を返します。

最小例：

https://jsfiddle.net/1w8hr5jr/

編集：それはDOMノードの唯一の特定の種類のfocusとblurは私のニーズに十分に強力であることを、フォーカスを受け取ることができるので、ある場合

ですここに？

Answer 1

私の提案は、私のコメントで言ったように、代わりにぼかしのClickイベントを使用して

HTML

<div id="container"> 
    <input type="text" id="foo"></input> 
    <div id="bar"> 
    hello 
    </div> 
</div> 

javascriptの

var container = document.getElementById('container'); 
var foo = document.getElementById('foo'); 
var bar = document.getElementById('bar'); 

function onFocus() { 
    bar.style.display = 'block'; 
} 

function onClick(evt) { 
    if (evt.target === foo) { 
    bar.style.display = 'block'; 
    } else if (evt.target !== bar) { 
    bar.style.display = 'none'; 
    } 
} 

container.addEventListener('click', onClick); 

https://jsfiddle.net/she5fqmh/2/

を集中することであるI最近同じ課題がありました。これが私の最高の回避策ですnd