событие TouchMove не запускается на Google Chrome для Android

Question

Это для реагирующего компонента «подпись клиента».Событие touchmove не запускается в браузере Google Chrome для Android.Я нахожусь на Samsung Galax Tablet (2016).Планшет подключен к компьютеру через USB-порт для консоли.

В моем componentDidMount я получаю ссылку на холст, 2d-контекст и т. Д. И устанавливаю прослушиватель событий для элемента canvas:

componentDidMount(){
   let canvas = this.refs.canvas;
   let ctx = canvas.getContext("2d");
   // ...
   canvas.addEventListener('touchmove ', (e) => { console.log("touchMove: ", e); });
}

В моем рендере у меня есть canvas: render () {}

Событие никогда не запускается. Я установил e.preventDefault на touchstart;страница не прокручивается при прикосновении к области холста.Прикосновение к холсту и перемещение пальца ничего не делают.

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

document.addEventListener('keydown', this.keyPress);
canvas.addEventListener('mousemove', this.mouseMove); // works
canvas.addEventListener('touchmove ', (e) => { console.log("touchMove E: ", e); }); // does not work
canvas.addEventListener("mousedown", this.mouseDown); // works
canvas.addEventListener("mouseup", this.mouseUp); // works
canvas.addEventListener("touchstart", this.touchStart); // works
canvas.addEventListener("touchend", this.touchEnd); // works

Сведения о системе

Chrome 66.0.3359.158
Android 5.1.1;SM-T280 Build/LMY47V

Дайте мне знать, если вам нужна другая информация.

У меня хорошо работает mouseMove, поэтому этот модуль подписи отлично работает на ПК.Сейчас я просто пытаюсь заставить это работать на мобильном / сенсорном экране.

PS Я читал, читал и читал о проблемах сенсорного перемещения на Android и подобных, но ни одна из этих проблемкажется, решить ту же проблему, что и у меня.

Спасибо за помощь

Answer 1

У меня такая же проблема, только на одном устройстве (Android 7.1.1 с Chrome 75.0.3770).Страница представляет собой отчет о работе, с областью подписи внизу.

Проблема трудна для повторения, потому что в зависимости от макета она не всегда проявляется (это сводило меня с ума, разбирая HTML-страницу мышленияУ меня где-то был незакрытый тег, вместо этого он был немного случайным, в зависимости от макета.), Также, если я прокрутил до конца, пока страница полностью не загрузилась (кэш отключен), произошло событие touchmove.

ПослеБыстрый Google, я нашел: События TouchMove перестали работать в Chrome 72 и последний веб-набор , где обходной путь должен был добавить границу, которая не работала для меня и поддерживает мой опыт, когда проблема зависит от того, как страницаRenders.

Исправление, приведенное выше от Baked Inhalf, действительно работает, однако вам придется добавить { passive: false }, если вы хотите заблокировать событие.Странно то, что в этом нет необходимости, просто добавление слушателя событий в тело решает проблему.

Вот мое исправление:

function fixTouchMove( event )
{
    return;
}

// Remove any previous listners as the page content is ajax loaded and body is never destroyed
document.body.removeEventListener( "touchstart", fixTouchMove );
// Event listner that doesn't do anything, but fixes missing eventmove
document.body.addEventListener( "touchstart", fixTouchMove );

ps добавьте style="touch-action:none;" к холсту, чтобыостановите прокрутку браузера, где вы хотите подписать / нарисовать

Answer 2

У меня была такая же проблема.Наконец, работало отключение прокрутки, если палец касается холста.

document.body.addEventListener("touchstart", function(e){ if (e.target.nodeName == 'CANVAS') { e.preventDefault(); } }, false);
document.body.addEventListener("touchend", function(e){ if (e.target.nodeName == 'CANVAS') { e.preventDefault(); } }, false);
document.body.addEventListener("touchmove", function(e){ if (e.target.nodeName == 'CANVAS') { e.preventDefault(); } }, false);