Handling touchstart/touchmove/touchend the same way as mousedown/mousemove/mouseup

Question

I'm trying to add a touch and drag functionnality in my app with no success so far.

Here's the idea:

1. The user touch an element to activate it
2. He moves his finger accross the element's siblings to activate them also
3. if he removes his finger, all the elements are deactivated

I can make it work flawlessly with mouse events but the touch events seems to work differently. I assume it's because once the touchstart is triggered, the other touch events are bound to the same initial target. What grinds my gear here, is that the touchend can be bound to a parent elements and works...

Here's an example code. You can see it works as expected with mouse event, but if you emulate the touch, it's not working anymore.

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>

Any insight on how to handle the touch the same way as with the mouse ? Anything I'm missing ?

Answer 1

It seems that we have to handle touchmove from parent component.

See this example

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>