Question

我有一个工具提示，它依赖于单击时成为活动元素，因此在模糊时它可以隐藏。

在像Chrome这样的体面浏览器中，<button>成为点击时的活动元素。在FF和Safari中它没有（他们甚至不会在元素上调用focus。）。

所以我切换到<a>，但即便如此，在Safari中仍然存在。

以下是此问题的演示，请在Chrome中尝试，然后尝试使用Safari：

＆＃13;

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

＆＃13;

<a href="#blah">Click me</a>

<p>Active element: <span class="active-el-tag"></span></p>

＆＃13;

如何使Safari正常运行并在元素上调用focus以使其成为activeElement？做element.focus()什么都不做！感谢。

修改： e.currentTarget.focus()确实有效，e.target指的是我span中的<a>。

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

});

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

2 个答案: