preventdefault и stoppropagation не работают с pointermove

Question

Я делаю приложение для рисования внутри HTML5 canvas, но я не могу сделать это с мобильного телефона или планшета.

Я не могу избежать родную прокрутки или хромированное обновления браузера при нажатии вниз

Я создал пример в jsfiddle, так что вы можете увидеть его.

Answer 1

Чтобы подавить поведение по умолчанию UA, вам необходимо добавить свойство CSS touch-action: none в элемент холста.

touch-action указывает, следует ли и как элемент HTML отвечать на жесты. С touch-action: none не запускается поведение UA (например, перетаскивание или масштабирование). Свойством по умолчанию является touch-action: auto, что позволяет запускать все поведение UA.

Answer 2

Это похоже на подлинную ошибку Chrome, о которой я расскажу, используя ваш пример кода. Настройка сенсорного действия в CSS не является решением, если вы хотите динамически решить в JavaScript, следует ли обрабатывать указательMove с помощью собственного кода и разрешать обработку собственного браузера.

Если вы установили touch-action: «none», тогда обработка собственного браузера никогда не будет запущена. И наоборот, как вы уже сообщали, отсутствие настройки сенсорного действия, эквивалентное по умолчанию «авто», не будет работать, потому что Chrome игнорирует вызовы функции preventDefault() на pointerMove и по-прежнему вызывает pointerCancel - ошибку.

Обратите внимание, что если вы добавили прослушиватель touchMove вместо этого, используя флаг passive: false, функция preventDefault() будет работать так, как ожидалось, избегая touchCancel. Тем не менее, тогда вам нужно использовать отдельные мыши и события прослушивания событий, чего вы пытаетесь избежать, используя события указателя.