Safari не запускает события касания

У меня есть маленький jsfiddle - http://jsfiddle.net/qhguktsn/5/. Когда вы нажимаете текст вверху ссылки (iOS mobile Safari), вы получаете только события мыши - никаких событий касания вообще, даже на теле. Если вы нажмете его в нижней части текста, вы получите события касания. Мы зависим от событий касания для обработки задержки 300 мс.

Как мы можем получить события касания для нажатия на верхнюю часть текста, а также на нижнюю?

HTML:

<div style="margin-left:200px;margin-top:200px">
    <a style="vertical-align:center;height: 20px, width: 20px;font-size:100px" href="javascript: void 0">text</a>
</div>

JS:

jQuery("a").on("mousedown", function() { document.body.appendChild(document.createTextNode("mousedown ")); });
jQuery("a").on("mouseup", function() { document.body.appendChild(document.createTextNode("mouseup ")); });
jQuery("a").on("touchstart", function() { document.body.appendChild(document.createTextNode("touchstart ")); });
jQuery("a").on("touchend", function() { document.body.appendChild(document.createTextNode("touchend ")); });
jQuery("a").on("click", function() { document.body.appendChild(document.createTextNode("click ")); });

jQuery(document.body).on("touchstart", function() { document.body.appendChild(document.createTextNode("body touchstart ")); });
jQuery(document.body).on("touchend", function() { document.body.appendChild(document.createTextNode("body touchend ")); });

Ответ 1

События касания на теле связаны с тем, что элемент тела смещается вниз по краю сверху, наводя контур элемента тела, очерчивает тач-цель:

body { outline: 1px solid red; }

http://jsfiddle.net/qhguktsn/11/

Вторая часть тайны, по-видимому, заключается в том, что цель клика расширяется вне сенсорной цели:

Прикосновение к красному контуру не приведет к событию касания на элементе body, но событие щелчка, похоже, срабатывает, если его использовать в любом месте серой области -webkit-tap-highlight-color, которая расширяется вне самого якоря. Отводы в самом верхнем углу будут запускать события щелчка на якоре, но не касаются событий на теле.

Ответ 2

Это ошибка в Mobile Safari. https://bugs.webkit.org/show_bug.cgi?id=105406 Существует еще один вариант: добавление node к другому документу. https://bugs.webkit.org/show_bug.cgi?id=135628

Чтобы исправить их, существует несколько способов.

Первый заключается в использовании небольшой библиотеки под названием fastclick, которая поддерживает многие мобильные устройства и ОС.

Вторым вариантом является добавление event.stopPropagation(); event.preventDefault();. Вам нужно обоим.

jQuery("a").on("mousedown", function(event) {
    event.stopPropagation();
    event.preventDefault();
    document.body.appendChild(document.createTextNode("mousedown ")); 
});

Третий вариант - использование метатега viewport, подобного <meta name="viewport" content="width=device-width, user-scalable=no">. Это устраняет все задержки прикосновений без каких-либо обходных решений. Но, опять же, в Safari он может не действовать, как в других браузерах, потому что hea Safari - это новый IE

Существует также touch-action, но он не поддерживается в большинстве мобильных браузеров.: (

Ответ 3

Я обнаружил, что событие касания не запускается при нажатии на элемент, содержащий позицию: фиксированный элемент, который выходит за пределы окна. Я обработал это, сделав родительский контейнер короче (использовал JS для получения точной высоты окна).

Эта проблема была в приложении UIWebview с использованием iOS 10. (Да, все еще использую UIWebview)