Я боролся с этим уже несколько дней, и хотя на этом сайте есть несколько связанных вопросов, ни один из них не дал мне точного ответа.
Моя цель - реализовать рисование на холсте в приложении телефонной связи. Мое конкретное приложение телефонной связи использует jQuery Mobile, а также Backbone для структуры, но не уверен, что это уместно здесь.
Кроме того, я начал с попытки следовать этому руководству: https://bencentra.com/code/2014/12/05/html5-canvas-touch-events.html
После избавления от всего ненужного кода все сводится к следующему:
document.body.addEventListener("touchstart", function (e) {
console.log('touchstart');
}, false);
document.body.addEventListener("touchmove", function (e) {
console.log('touchmove');
}, false);
document.body.addEventListener("touchend", function (e) {
console.log('touchend');
}, false);
В этой самой простой реализации я вижу сообщение журнала «touchstart» и «touchend», но никогда не вижу «touchmove».
Я пробовал несколько вещей, чтобы сделать эту работу, в том числе:
1) замена document.body на элемент canvas, который также есть на странице.
2) добавление e.preventDefault() в функцию обработчика touchstart. Примечание: это приводит к ошибке: «Игнорируется попытка отменить событие touchstart с cancelable=false, например, потому что прокрутка выполняется и не может быть прервана».
Обратите внимание, что у автора учебника, по-видимому, была та же проблема, и у него есть решение, которое я, конечно, пробовал, но это не сработало для меня.
Важно: Кроме того, хотя это мобильное приложение, я провожу тестирование в браузере Chrome, находясь в режиме эмуляции устройства для iPhone 4. Если вы не будете тестировать в этом режиме, у вас не будет той же проблемы, потому что сенсорные события не будут даже не запускаться в обычном режиме просмотра веб-страниц.
Любая помощь приветствуется. Спасибо.