Почему событие размытия не запускается в iOS Safari Mobile (iPhone/iPad)?

У меня есть два обработчика событий, привязанных к тегу привязки: один для фокуса и размытия.

Обработчики запускаются на рабочем столе, но в iphone и ipad только фокус запускается правильно. Blur не запускается, если я нахожусь за пределами привязанного тега (размытие срабатывает только при нажатии некоторых других элементов формы на странице):

    $("a").focus(function(){
        console.log("focus fired");
    });

    $("a").blur(function(){
        console.log("blur fired");
    });

HTML:

<html>
<form>
    <a href="#">test link</a>
    <div>
    <input type="text" title="" size="38" value="" id="lname1" name="" class="text">
    </div>
    <div style="padding:100px">
        <p>test content</p>
    </div>
</form>
</html>

Ответ 1

Если привязка привязана к каким-либо событиям, первое нажатие на нее в iOS заставляет якорь помещаться в состояние зависания и сфокусироваться. Отключить удаляет состояние зависания, но ссылка остается сфокусированной. Это по дизайну. Чтобы правильно управлять приложением на iOS, вам необходимо реализовать сенсорные события и реагировать на них вместо настольных.

Существует полное руководство по использованию событий Javascript в WebKit в iOS.

Ответ 2

Это взломать, но вы можете получить .blur для запуска, зарегистрировав обработчик кликов на каждом элементе DOM. Это удаляет фокус с ранее сфокусированного элемента.

$( '*' ).click( function ( ) { } );
$( 'html' ).css( "-webkit-tap-highlight-color", "rgba(0, 0, 0, 0)" );

Вторая строка удаляет выделение при нажатии элементов.

Я знаю, что это неоптимально, но это может заставить вас пойти.

Ответ 3

Если вы работаете с сенсорными устройствами, вы можете использовать событие touchleave или touchhend для обработки, когда пользователь щелкает за пределами области.

$("a").on('touchleave touchcancel', function () {
      // do something
});

Для этого вам необходимо обновить функцию фокуса, чтобы прослушать событие click, как показано ниже.

$("a").on("click", function (e) {
      if(e.handled !== true) {
            e.handled = true
      } else {
            return false
      }
      // do something
 })

Ответ 4

в самом удаленном div

<div onclick='click()'>

затем в javascript

function click(){}