TouchMove Event on iOS

Question

I am currently developing a web application for iPad. I have a html canvas, where I am wanting to track the coordinates of the touchmove event. I can track the touchstart event, which outputs the coordinate I have pressed, but when I try and output my current coordinates as I am moving across the canvas, it is doing nothing, I have the following code which is using angular2, where this.currentArrowPoint is the label I am outputting the values to on the screen:

e.preventDefault();
this.currentArrowPoint = ["a", "b"];
this.currentYPosition = ["e.changedTouches[0].pageY];
this.currentArrowPoint = [this.currentYPosition];

It is definitely entering the mousemove, as I am getting the a and b back, but then when I output anything relating to the event e, I get absolutely no output, not even if I try and output just e. This works on everything but apple devices, so wondering if I am missing something special about apple browsers or devices?

Thanks

Answer 1

As you can read here , only Chrome and Firefox support changedTouches in a TouchEvent , which in turn means that Safari does not support this.

I also guess you did not mean to put e.changedTouches[0].pageY in between quotes?

You should try and track touches based on their index on touchstart (such a waste why they didn't call this touchdown ....) and figure out on touchmove if any of these touches have changed. You are using a canvas, so I can imagine you are trying to draw something. You could stop drawing once you count more than 1 touch. This way you are always sure you are tracking the right finger (or toe.. I'm not judging)

Answer 2

I find walk around solution if you want do swipe or something like that on iOS 13 with 3 event listener.

const someFucntion = () =>{
   let touchstartX = 0;
   let touchendX = 0;

   const gesturedZone = this.mainWrapperRef.current; // ref, querySelector or something else
      gesturedZone.addEventListener('touchstart', (event) => {
         if (event.touches.length === 1) {
            touchstartX = event.touches[0].screenX;
         }
      }, false);
      gesturedZone.addEventListener('touchmove', (event) => {
         if (event.touches.length === 1) {
            touchendX = event.touches[0].screenX;
         }
      }, false);
      gesturedZone.addEventListener('touchend', () => {
         this.handleGesture(touchstartX, touchendX);
      }, false);
}
const handleGesture = (touchstartX, touchendX) => {
   // do some staff
};