為什么模糊和對焦在 Safari 上不起作用？

Question

我有這樣的簡單按鈕：

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

在 Chrome 上，這兩個事件都可以完美運行。

在 Safari onclick 事件可以正常工作，但不會觸發 onblur 事件。 element.blur() function 也不會觸發 onblur 事件。 我需要它像在 Chrome 上一樣在 Safari 上工作，我該怎么辦？ 這里有什么問題？

Answer 1

似乎 Safari 沒有在單擊時將按鈕元素聚焦。 因此，根據定義，onblur 屬性會在元素失去焦點的那一刻觸發。 元素未聚焦 => onblur 不會觸發。

解決方案之一是單擊后手動應用button.focus() 。

另一種是在document上附加click事件，如下所示

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 上不起作用？

問題描述

2 個解決方案

解決方案1
6 已采納 2020-04-16 08:59:17

解決方案2
5 2020-04-16 09:12:57

為什么模糊和對焦在 Safari 上不起作用？

問題描述

2 個解決方案

解決方案1 6 已采納 2020-04-16 08:59:17

解決方案2 5 2020-04-16 09:12:57

解決方案1
6 已采納 2020-04-16 08:59:17

解決方案2
5 2020-04-16 09:12:57