为什么模糊和聚焦在 Safari 上不起作用？答案

【问题标题】：Why blur and focus doesn't work on Safari?为什么模糊和聚焦在 Safari 上不起作用？
【发布时间】：2020-07-29 10:26:51
【问题描述】：

我有这样的简单按钮：

<button class="emoji-button-container" onblur="APP.hideEmojiContainer()" onclick="APP.toggleEmojiContainer()">

在 Chrome 上，这两个事件都可以完美运行。

在 Safari 上，onclick 事件可以正常工作，但不会触发 onblur 事件。 element.blur() 函数也不会触发 onblur 事件。我需要它像在 Chrome 上一样在 Safari 上工作，我该怎么办？这里有什么问题？

【问题讨论】：

标签： javascript html css macos safari

【解决方案1】：

在 Safari 上，按钮可能不会在单击时聚焦（并且因为它们不聚焦，所以不会触发模糊）

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus

您可以使用 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>

【讨论】：

【解决方案2】：

Safari 似乎没有将按钮元素集中在点击上。因此，根据definition，onblur 属性会在元素失去焦点的那一刻触发。元素未聚焦 => onblur 不会触发。

其中一种解决方案可以在点击后手动应用button.focus()。

另一种方法是将click事件附加到document上作为here

【讨论】：