Safariでフォーカスのアクティブな要素が正しく変更されない

Question

クリックしたときにアクティブな要素になることに依存するツールヒントがあるため、ぼかしで非表示にできます。

Chromeのようなまともなブラウザでは、<button>がクリックされたときにアクティブな要素になります。 FFやSafariでは、それはしません（彼らはfocusを要素に呼び出すことさえしません！）。

私は<a>に切り替えましたが、それでもSafariではまだ壊れています。ここで

はChromeで試してみて、その後、サファリ、問題のデモです：

document.querySelector('a').addEventListener('click',() => { 
 
    echoActiveEl(); 
 
}); 
 

 
function echoActiveEl() { 
 
    document.querySelector('.active-el-tag').innerHTML = document.activeElement.tagName.toLowerCase(); 
 
} 
 

 
echoActiveEl();

<a href="#blah">Click me</a> 
 

 
<p>Active element: <span class="active-el-tag"></span></p>

どのように私はSafariが適切に動作し、それがactiveElementなるように要素にfocusを呼び出すことができます？ element.focus()は何もしません！ありがとう。

編集：e.currentTarget.focus()が実際に動作しない、e.targetは私<a>に持っていたspanに指していました。

が

document.querySelector('a').addEventListener('blur',() => { 
    var targetElement = event.target || event.srcElement; 
    echoBluredEl(targetElement) 
}); 

function echoBluredEl(ele) { 
    document.querySelector('.blured-el-tag').innerHTML = ele.tagName.toLowerCase(); 
} 

Answer 1

限り、手動で入れフォーカス私はそれがES 6のサポートの問題だと思う懸念され、代わりに伝統的な構文を試してください：あなたはonBlurイベントを必要とするので

Answer 2

、あなたはこのような何かをしたいものをアーカイブすることができます

document.querySelector('a').addEventListener('click', function(e) { 

    //e.preventDefault(); 
    this.focus(); 
    document.querySelector('.active-el-tag').innerHTML = document.activeElement.tagName.toLowerCase(); 

});