Почему размытие и фокус не работает на Safari? - PullRequest
Новая
       12

Почему размытие и фокус не работает на Safari?

1 голос
/ 16 апреля 2020

У меня есть такая простая кнопка: 

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

На Chrome оба события работают отлично.

В Safari событие onclick работает без каких-либо проблем, но событие onblur не запускается. Также функция element.blur () не вызывает событие onblur. Мне нужно, чтобы он работал на Safari, как и на Chrome, что я могу сделать? в чем здесь проблема?

Ответы [ 2 ]

2 голосов
/ 16 апреля 2020

Кажется, Safari не фокусирует элемент кнопки при нажатии. Так, согласно определение , атрибут onblur запускает момент, когда элемент теряет фокус. Элемент не сфокусирован => onblur не срабатывает.

Одно из решений может быть применено вручную button.focus() после щелчка.

Другое - прикрепить событие click к document как здесь

1 голос
/ 16 апреля 2020

В 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...