Vuejs：Touchmove 触发但在 touchstart 时总是在第一个项目上 return

Question

我对 Vuejs 的触摸事件有疑问。我想用鼠标事件（对于 PC）和触摸事件（对于移动设备）加入一些号码，如下所示：

        <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>

由于 mousedown、mouseup、mousemove 在 PC 上运行良好，触摸事件也在移动设备上触发，但它总是 return 项 touchstart。
例如，如果我（通过触摸）从 2 移动到 5，在 touchmove 和 touchend 事件上项目总是 return 2。

这是我的数据：

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

我在 Chrome 开发模式下进行了测试，并在 Ipad 上进行了测试。你能告诉我为什么并建议我解决这个问题吗？感谢您的帮助。

Answer 1

触摸事件的工作方式略有不同，请尝试更改您的 doMove 方法。

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

说明，在这个方法中，我们尝试获取当前触摸或指针的位置。基于此我们正在获取当前元素。

Vuejs：Touchmove 触发但在 touchstart 时总是在第一个项目上 return

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

touchstart

touchmove

vue.js