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. Can you tell me why and suggest me the solution for this. Thank for your help.

score 2 · Accepted Answer · answered Apr 23 '22 at 12:28

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.

thank you very much for your help but it will take long way :(. On the demo, I just put it as number but in my project it is complex object — Hai Tien, Apr 24 '22 at 09:26

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

1 Answers1