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

Question

我有这样一个简单的按钮：

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

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

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

Answer 1

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

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

另一个是在 document 上附加 click 事件作为 here

Answer 2

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

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

Why blur and focus doesn't work on Safari?

html

javascript

css

safari

macos