与mousedown/mousemove/mouseup相同地处理touchstart/touchmove/touchend

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

* {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                    supported by Chrome and Opera */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div id="app" class="container py-4" @mouseup="togglePanMode(false)" @touchend="togglePanMode(false)">
  <div class="row">
    <to-press v-for="i of 12" :key="i" @on-pan="togglePanMode(true)" :is-pan="panMode" />
  </div>
  <p>Click/touch a rectangle, hold and drag accross</p>
</div>

您有没有关于如何像使用鼠标一样处理触摸的任何见解？我有什么遗漏的吗？

- Pierre Burton

Answer 1

看起来我们需要从父组件处理touchmove事件。

请参考此示例。

最初的回答：

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;
    },
    move(e) {
      let p = e.touches[0];
      let el = document.elementFromPoint(p.clientX, p.clientY);
      let cmp = this.$children.find(c => c.$el === el);
      if (cmp) {
        cmp.setActive()
      }
    }
  }
})

* {
  -webkit-touch-callout: none;
  
  /* iOS Safari */
  -webkit-user-select: none;
  
  /* Safari */
  -khtml-user-select: none;
  
  /* Konqueror HTML */
  -moz-user-select: none;
  
  /* Firefox */
  -ms-user-select: none;
  
  /* Internet Explorer/Edge */
  user-select: none;
  
  /* Non-prefixed version, currently supported by Chrome and Opera */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div id="app" class="container py-4" @mouseup="togglePanMode(false)" @touchend="togglePanMode(false)" @touchmove.passive="move">
  <div class="row">
    <to-press v-for="i of 12" :key="i" @on-pan="togglePanMode(true)" :is-pan="panMode" />
  </div>
  <p>Click/touch a rectangle, hold and drag accross</p>
</div>

- talkhabi

---

正常工作，但是我是唯一一个觉得这有点不太好的人吗？ - Pierre Burton

@PierreBurton 是的，如果你指的是 move 方法，那还好。但整个应用程序和子组件都可以简化。 - talkhabi