Как предотвратить моделирование событий мыши в мобильных браузерах?
Мобильные браузеры имитируют события мыши, чтобы поддерживать веб-сайты, которые только прикрепляют обработчики к событиям мыши. Однако, если вы хотите реализовать две модели взаимодействия: одну для событий мыши и одну для сенсорных событий, тогда полезно предотвратить симуляцию событий мыши в браузере.
В iOS Safari это довольно просто - просто запустите preventDefault на touchhend:
jQuery(document).on('touchend', function(e) {
// Do some logic
e.preventDefault();
});
Это довольно здорово. К сожалению, ни браузер Android по умолчанию, ни Dolfin не отменяют мышью, используя эту технику. (Dolfin отменит mousedown, когда preventDefault будет запущен на touchstart - но это не очень полезно, потому что вы не знаете, какое действие перст примет на touchstart.)
Есть ли другой способ условно или даже не условно предотвратить предотвращение симуляции событий мыши?
[EDIT]
Чтобы лучше понять проблему, я запустил таблицу совместимости сенсорных событий: http://labs.cruncher.ch/touch-events-compatibility-table/
Ответы
Ответ 1
Хотя есть некоторые хитроумные способы достижения этого, есть две распространенные практики, которые я использую, чтобы обойти это несоответствие:
1) Использовать флаги
Установка булевых флагов в обработчиках событий, таких как mouseIsDown
или mouseIsMoving
, может быть установлена и проверена для событий мыши и касания. Если пользователь нажимает на мышь, принимайте это как событие мыши. Затем, если событие касания происходит вместе с ним, не обращайте на него внимания.
2) Реализуйте только то, что необходимо
Ну, это хорошая практика. Не беспокойтесь, добавляя touchmove
и mousemove
события, если вам это не нужно. Это просто усложнит сохранение кода. Редактирование: вероятно, должно быть более конкретным: подумайте над переосмыслением вашего пользовательского интерфейса, если вам нужно более продвинутое отслеживание событий.
Наконец, не полагайтесь на внешние списки конфигурации оборудования, поскольку они редко "полностью" точны.