Vuejs: Touchmove fired but always return on the first item when touchstart

Question

I have question related to touch event with Vuejs. I want to join some number with mouse event (for PC) and touch event (for Mobile Devices) like this:

        <div
          @mousedown="startMove(item)"
          @mouseup="endMove(item)"
          @mousemove="doMove(item)"

          @touchstart="startMove(item)"
          @touchend="endMove(item)"
          @touchmove="doMove(item)"          
          v-for="item in 9"
          :key="item"
        >
          {{ item }}
        </div>

Since mousedown, mouseup, mousemove working well on PC, touch event also fired on mobile devices but it always return item of touchstart. Example: if I move(with touch) from 2 to 5, item always return 2 on touchmove and touchend event.

Here is my data:

data(){
 return {
   isMoving: false
 }
},
methods: {
 startMove(e){
   this.isMoving= true;
 },
 endMove(e) {
   this.isMoving= false;
 },
 doMove(e) {
   if (this.isMoving) {
     console.log(e)
   }
 }
}

I tested with Chrome develop mode, and tested on Ipad. What is the solution for this?

Answer 1

Touch events work a little differently, try changing your doMove method.

doMove(e) {
      if (this.isMoving) {
        const clientX = e.clientX || e.changedTouches[0].clientX;
        const clientY = e.clientY || e.changedTouches[0].clientY;
        console.log(document.elementFromPoint(
          clientX,
          clientY
        ).innerHTML);
      }
    },

Explanation, In this method, we try to get the position of the current touch or pointer. based on that we are getting the current element.