以与 mousedown/mousemove/mouseup 相同的方式处理

Question

到目前为止，我正在尝试在我的应用程序中添加触摸和拖动功能，但没有成功。

这是想法：

1. 用户触摸一个元素来激活它

2. 他在元素的兄弟姐妹上移动他的手指来激活它们

3. 如果他移开手指，所有元素都将被停用

我可以让它与鼠标事件完美地工作，但触摸事件的工作方式似乎不同。我认为这是因为一旦触发了 touchstart，其他触摸事件就会绑定到同一个初始目标。在这里磨练我的装备的是，touchend 可以绑定到父元素并工作......

这是一个示例代码。您可以看到它在使用鼠标事件时按预期工作，但是如果您模拟触摸，它就不再工作了。

Vue.component('to-press', {

  template: `<span class="col-3 p-2 bg-light border" :class="{ 'bg-dark': isActive }" @mousedown="emitPanMode()"  @touchstart="emitPanMode()" @mousemove="setActive()" @touchmove="setActive()">&nbsp;</span>`,

  props: ['isPan'],

  data() {

    return {

      isActive: false,

    }

  },

  methods: {

    emitPanMode() {

      this.isActive = true;

      this.$emit('on-pan');

    },

    setActive() {

      this.isActive = this.isPan;

    }

  },

  watch: {

    isPan(val) {

      if (!val) {

        this.isActive = false;

      }

    }

  }

})

const app = new Vue({

  el: "#app",

  data() {

    return {

      panMode: false,

    };

  },

  methods: {

    togglePanMode(val) {

      this.panMode = val;

    }

  }

})