Отключить запуск touchcancel в браузере Android

Я делаю мобильный веб-сайт, который использует сенсорные события JavaScript. В iOS Safari и Chrome для Android все работает нормально, но стандартный браузер Android (версия 4.1.2) вызывает у меня проблемы.

Во время сенсорного процесса события touchstart и touchmove вызываются, как и ожидалось. Однако одно из действий, выполняемых обработчиком touchmove, похоже, вызывает преждевременное событие touchcancel. (Я не уверен, имеет ли это значение, но действие, которое запускает touchcancel, является модификацией атрибута viewBox объекта SVG.) Если я закомментирую это действие, процесс касания продолжится нормально (т. е. завершение от touchmove до touchend ).

Все мои обработчики касаний вызывают функцию preventDefault(), поэтому проблема не та, что описана в этой ошибке: https://code.google.com/p/android/issues/detail?id=19827..

Я читал, что существует много несоответствий среди браузеров относительно того, когда вызывается touchcancel. Стандартный браузер Android - единственный, который вызывает у меня проблемы.

Есть ли обходной путь? Например, могу ли я полностью отключить событие touchcancel? Другая идея, которую я имел, заключалась в том, чтобы обработчик touchcancel программно запускал другое событие touchstart/touchmove, но я не продвинулся в этом очень далеко. Любые идеи были бы хорошы.


android javascript touch android-browser
person David G.    schedule 24.06.2013    source источник
comment
Арх! Я думаю, что эта проблема теперь перекочевала в браузер Chrome! Он появился в версии 28. См. code.google.com/p/chromium. /issues/detail?id=260732.   -  person David G.    schedule 01.08.2013
comment
См. также этот пост, который кажется связанным: браузер touchcancel запускается, хотя touchmove имеет preventdefault"> stackoverflow.com/questions/15944197/   -  person David G.    schedule 01.08.2013
comment
Я столкнулся с этой проблемой в браузере Chrome сейчас, мешая использованию Hammer.js. Кто-нибудь знает, как обойти это?   -  person acjay    schedule 14.01.2014
comment
Пожаловаться здесь code.google.com/p/chromium/issues/detail? идентификатор = 372357   -  person Old fart    schedule 26.08.2014
comment
Для дальнейшего использования ответ здесь работает отлично: -android-touchотмена   -  person Sam P    schedule 24.07.2015

Ответы (3)


arrow_upward
4
arrow_downward

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

По сути, если вы переключитесь на события указателя, вы сможете предотвратить pointercancel, просто используя свойство CSS touch-action со значением none, если в браузере правильно реализованы обе функции. (Android 5+, Chrome 55+, IE11, Edge и т. д.)

Если вам действительно необходимо использовать устаревшие сенсорные события, вам придется реализовать event.preventDefault() в событиях touchmove, и это предотвратит срабатывание touchcancel, но также полностью отключит обработку браузером любого действия по умолчанию. как кастрюля или щелчок.

И последнее замечание: я бы не стал использовать сенсорные события + правила CSS сенсорного действия, потому что touch-action было добавлено совсем недавно, как и события указателя. Таким образом, несмотря на то, что эта комбинация может работать в новых браузерах, она наверняка не работает в старых (неожиданно вызывая событие touchcancel).

Проверьте README из расширения jQuery, которое я опубликовал, потому что оно объясняет последствия использования интерфейсов TouchEvent и PointerEvent.

person andreszs    schedule 06.10.2017

arrow_upward
2
arrow_downward

Если вы используете Hammer.js, вы можете отключить события указателя (которые вызывают подобные проблемы), добавив: delete window.PointerEvent; в свой index.html ДО загрузки Hammer.js, и он будет игнорировать эти события.
Вы можете также установите SUPPORT_POINTER_EVENTS = false; (строка 384 версии 2.0.8), чтобы сделать то же самое. В идеале разработчики добавили бы возможность отключать это, но такова дилемма с открытым исходным кодом...

person GrumpyGary    schedule 29.11.2017
comment
Потрясающий! Спасибо! Я борюсь с поведением touchcancel Chrome (Android) уже несколько дней, и это первое решение, которое действительно решило мои проблемы с Hammer.js. - person horace; 18.02.2018
comment
Ты шутишь, что ли!? Не могу поверить, что это сработало. Как безумно! Я потратил три дня, пытаясь выяснить, почему мой пользовательский интерфейс был забит, и это простое исправление k̶l̶u̶d̶g̶e̶ решило эту проблему? Вау просто вау.... - person Michael; 21.02.2018

arrow_upward
0
arrow_downward

Я думаю, что touchcansel — это специальное событие, которое срабатывает, когда пользователь нажимает кнопку в определенном поведении.

Бывший. Пользователь касался кнопки, но не убирал палец с дисплея именно на этой кнопке, вместо этого он мог сдвинуть его немного влево, и там закончить свое действие. В этом случае появится touchcancel.

Поэтому, если вы не хотите, чтобы это действие запускалось, я думаю, вам нужно удалить все обработчики, связанные с этим действием, в браузере Android.

$('selector').off('touchcancel'), если он делегирован $('parent').undelegate('touchcancel','selector')

Я не думаю, что есть проблема с e.preventDefault(). Только может быть, если вы нажмете на ссылку, и страница начнет перезагружаться. Может страница перезагружается при нажатии на кнопку? и вы ждете каких-то действий после перезагрузки страницы, вы на самом деле можете не понимать, что это произошло.

person Rantiev    schedule 01.02.2014
comment
Touchcancel неизбежно активируется браузером и пытается отмена или предотвращение по умолчанию внутри него не будут работать должным образом. - person andreszs; 06.10.2017