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();
});
我有一个工具提示,它取决于单击时成为活动元素,以便在模糊时它可以隐藏。
在像 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();
});