为什么模糊和对焦在 Safari 上不起作用？
[英]Why blur and focus doesn't work on Safari?
问题描述
I have simple button like that:
我有这样的简单按钮：
<button class="emoji-button-container" onblur="APP.hideEmojiContainer()" onclick="APP.toggleEmojiContainer()">
On Chrome both event works perfectly.在 Chrome 上，这两个事件都可以完美运行。
On Safari onclick event works without any problem, but onblur event doesn't get triggered.在 Safari onclick 事件可以正常工作，但不会触发 onblur 事件。 Also element.blur() function doesn't trigger onblur event. element.blur() function 也不会触发 onblur 事件。 I need it to work on Safari just like on Chrome, so what can I do?我需要它像在 Chrome 上一样在 Safari 上工作，我该怎么办？ what's problem here?这里有什么问题？
2 个解决方案
解决方案1
6 已采纳 2020-04-16 08:59:17
It seems Safari doesn't focus button element on click.似乎 Safari 没有在单击时将按钮元素聚焦。 So, according to definition , onblur attribute fires the moment that the element loses focus.因此，根据定义，onblur 属性会在元素失去焦点的那一刻触发。 Element is not focused => onblur doesn't fire.元素未聚焦 => onblur 不会触发。
One of the solution could be manually apply button.focus() after click.解决方案之一是单击后手动应用button.focus() 。
Another one is to attach click event on document as here另一种是在document上附加click事件，如下所示
解决方案2
5 2020-04-16 09:12:57
On Safari, buttons may not be focused on click (and because they do not focus, they do not trigger blur)在 Safari 上，按钮可能不会在单击时聚焦（并且因为它们不聚焦，所以不会触发模糊）
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
You can focus the button using javascript though您可以使用 javascript 聚焦按钮
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
function clickFunc(event) {
console.log(event, 'click');
event.target.focus();// Add me
};
function blurFunc(event) {
console.log(event, 'blur');
};
</script>
</head>
<body>
<button class="emoji-button-container" onblur="blurFunc(event)" onclick="clickFunc(event)"></button>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.