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

Question

到目前为止，我正在尝试在我的应用程序中添加触摸和拖动功能，但没有成功。这是想法：用户触摸一个元素来激活它他在元素的兄弟姐妹上移动他的手指来激活它们如果他移开手指，所有元素都将被停用我可以让它与鼠标事件完美地工作，但触摸事件的工作方式似乎不同。我认为这是因为一旦触发了 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;    }  }})