Сафари не стреляет событиями касания

У меня есть небольшой jsfiddle - http://jsfiddle.net/qhguktsn/5/. Когда вы нажимаете текст вверху ссылки (iOS mobile Safari), вы получаете только события мыши - никаких событий касания вообще, даже на теле. Если вы нажмете его в нижней части текста, вы получите события касания. Мы зависим от событий touch для обработки задержки 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 ")); });

источник

2015-08-13 Puppy

Я думаю, что я мог бы иметь то же самое на iOS 8.1.2 с Chrome. – PaukkuPalikka

Chrome использует тот же механизм рендеринга, что и Safari на iOS, поэтому поведение должно быть идентичным (как и со всеми другими браузерами, работающими на iOS). – Luckyrat

Я старался выяснить, почему события касания на моей маленькой кнопке не стреляли последовательно, и ваш пост помог мне понять, что это проблема края! События прикосновения не срабатывают, пока вы нажимаете слишком близко к любому краю, включая левый и правый края, но события щелчка по-прежнему срабатывают. –

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

body { outline: 1px solid red; }

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

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

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

источник

2015-08-13 10:42:14 Douglas

Основная проблема заключается в том, что затронутая область слишком мала - в реальных тестах в верхней части есть значительно более крупная полоса, которая проявляет проблему. – Puppy

Кажется, что браузер интерпретирует краны как всегда намного выше, чем пользователь думает, что они прослушиваются, поэтому между этими двумя проблемами это может быть и так. – Puppy

@ Дуглас благодарит пролить свет на эту тайну. Есть ли решение этой проблемы? –

Это ошибка в Mobile Safari. https://bugs.webkit.org/show_bug.cgi?id=105406 Существует еще один вариант с добавлением узла в другой документ. 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 ")); 
});

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

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

источник

2015-08-20 18:14:53 Stanimir

Я не очень уверен в этой ошибке, так как мы испытываем различное поведение в зависимости от того, где на кнопке вы нажимаете. И исправления, которые вы указали, на самом деле не применяются. Fastclick делает то же самое, что и то, что мы сделали, я действительно не уверен, как отмена события мыши приведет к неожиданному прикосновению события волшебным образом, и третий вариант, как вы сказали, не относится к Safari, поэтому я действительно не вижу актуальности. – Puppy

Извините, я не могу быть более полезным. На данный момент у меня больше нет идей. – Stanimir

Btw, проверьте ссылку внизу этого сообщения. http://stackoverflow.com/a/4165641/2855530 – Stanimir

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

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

источник

2016-10-08 14:02:49 user984003

Сафари не стреляет событиями касания

ответ

Смежные вопросы