为什么touchmove无法在html画布上触发？

Question

I'm using an angular app, where the user has a canvas, and can draw rectangles on that canvas.

My touchstart and touchend are firing, but touchmove is not. I'm not sure if I'm not understanding how touchmove works. I was assuming it would be equivalent to 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);
      }
    });
  }

The touchstart and touchend work, but touch move never fires. I can never get the console output.

Edit: I changed the first line to be touchmove , as there was touchMove and touchmove (typo), but that still does not fire the touchmove. Also, I get Ignored attempt to cancel a touchstart event with cancelable=false, for example because scrolling is in progress and cannot be interrupted. warning when I try to draw something down. This is really strange, because I tried the same thing in a non-angular app (Very simple canvas interactions), and I didn't get that error. It blocked me from scrolling, and instead drew stuff on the canvas.

Answer 1

If you review your code, when you add a listener in this line:

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

you're calling the function self.touchMove(e) and more below at the code you're declaring your function as touchmove(e) , Here is a great library that it helps you to handle touch events Hammerjs