为什么 touchmove 不会在 html 画布上触发？

Question

我正在使用一个有角度的应用程序，其中用户有一个画布，并且可以在该画布上绘制矩形。

我的 touchstart 和 touchend 正在触发，但 touchmove 没有。我不确定我是否不了解 touchmove 的工作原理。我假设它相当于 mousemove。

  self.canvas.addEventListener('touchmove', (e) => { self.touchMove(e); });
  self.canvas.addEventListener('touchstart', (e) => { self.touchStart(e); });  // touch down event
  self.canvas.addEventListener('touchend', (e) => { self.touchEnd(e); }); //



  touchStart(e) {
    e.preventDefault();
    const self = this;
    const activeTag = self.TagService.activeTags[0];
    this.canvasState.doTouchStart(e, activeTag, (shape) => {
      self.selection = shape;
    });
  }


  touchEnd(e) {
    const self = this;
    // console.log(this);//is the controller
    const activeTag = self.TagService.activeTags[0];
    self.canvasState.doTouchEnd(e, activeTag, function doTouchUp(shape) { 
      self.selection = shape;
      self.addShape(shape);
      // console.log(self.shapes);
    });
  }

  touchmove(e) {
    e.preventDefault();
    console.log("HERE HERE HERE");
    const self = this;
    const activeTag = self.TagService.activeTags[0];
    this.canvasState.doTouchMove(e, activeTag, (shape) => {
      let len = self.shapes.length;
      self.addShape(shape);
      let len2 = self.shapes.length;
      if (len2 - len === 1) {
        self.draw();
        self.shapes.splice(-1, 1);
      }
    });
  }

touchstart 和 touchend 工作，但 touch move 永远不会触发。我永远无法获得控制台输出。

编辑：我将第一行更改为touchmove，因为有 touchMove 和 touchmove（错字），但这仍然不会触发 touchmove。 此外，当我尝试绘制某些东西时，我会收到 Ignored attempt to cancel a touchstart event with cancelable=false, for example because scrolling is in progress and cannot be interrupted. 警告。这真的很奇怪，因为我在非角度应用程序（非常简单的画布交互）中尝试了同样的事情，但我没有得到那个错误。它阻止我滚动，而是在画布上绘制东西。

Answer 1

如果你检查你的代码，当你在这一行添加一个监听器时：

self.canvas.addEventListener('touchmove', (e) => { self.touchMove(e); });

您在将函数声明为touchmove(e) 的代码中调用了函数self.touchMove(e) 和更多函数，这是一个很棒的库，它可以帮助您处理触摸事件 Hammerjs