Safari 无法正确更改焦点上的活动元素

Safari doesn't correctly change active element on focus

我有一个工具提示,它取决于单击时成为活动元素,以便在模糊时它可以隐藏。

在像 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

由于您需要 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();
}

就手动放置焦点而言,我认为这是一个 ES 6 支持问题,请尝试使用传统语法

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

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

});