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);
      }
    });
  }

触摸启动和触摸工作，但触摸移动永远不会触发。我永远无法获得控制台输出。

编辑：我将第一行更改为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); });

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

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

1 个答案: