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();

});