Safari無法正確更改焦點上的活動元素

Question

我有一個工具提示，該提示取決於單擊時是否變為活動元素，以便在模糊時可以將其隱藏。

在像Chrome這樣的不錯的瀏覽器中，點擊<button>會成為活動元素。 在FF和Safari中則不是（它們甚至不將focus放在元素上！）。

所以我切換到了<a> ，但是即使在Safari中仍然無法使用。

以下是該問題的演示，請嘗試先使用Chrome，然后再使用Safari：

 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正常運行並把focus放在元素上，使其成為activeElement？ 做element.focus()什么也做不了！ 謝謝。

編輯： e.currentTarget.focus()確實有效， e.target指向我在<a>具有的span 。

Answer 1

由於需要onBlur事件，因此可以使用以下內容存檔所需內容：

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 2

至於手動關注焦點，我認為這是ES 6支持問題，請嘗試使用傳統語法

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

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

});