如何使用 html5 画布处理触摸事件？

Question

我已经使用 html5 画布创建了基于绘画的功能。当涉及到桌面时，它按我的预期工作，但问题只在触摸设备上。我不知道问题来自哪里。有人可以帮我解决这个问题吗？过去两天我一直在苦苦挣扎。

我的代码

if(windowWidth <= 1024) {
  canvas2.addEventListener('touchmove', function(e) {
      mouse.x = e.pageX;
      mouse.y = e.pageY;
      handlerPos.x = e.pageX;
      handlerPos.y = e.pageY;
  }, false);
} else {
  canvas2.addEventListener('mousemove', function(e) {
    mouse.x = e.pageX;
    mouse.y = e.pageY;
    handlerPos.x = e.pageX;
    handlerPos.y = e.pageY;
  }, false);
}

Answer 1

也许你正在寻找这个

不幸的是，一切都不是很好。与内置浏览器手势的冲突引发了一个问题。当我在画布上移动手指时，我希望页面保持静止以便我可以画画。但是，如果我的页面有水平或垂直滚动​​（确实如此），页面会随着我的手指移动，从而无法正确绘图。经过一番挫折，我偶然发现了解决方案：如果触摸事件的目标是画布，则防止在 document.body 上滚动。

http://bencentra.com/code/2014/12/05/html5-canvas-touch-events.html

document.body.addEventListener('touchmove', function(e) {
   mouse.x = e.pageX;
   mouse.y = e.pageY;
   handlerPos.x = e.pageX;
   handlerPos.y = e.pageY;
}, false);