title: Handling touchstart/touchmove/touchend the same way as mousedown/mousemove/mouseup
body: <p>I'm trying to add a touch and drag functionnality in my app with no success so far.</p>
  
  <p>Here's the idea:</p>
  
  <ol>
  <li>The user touch an element to activate it</li>
  <li>He moves his finger accross the element's siblings to activate them also</li>
  <li>if he removes his finger, all the elements are deactivated</li>
  </ol>
  
  <p>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...</p>
  
  <p>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.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>Vue.component('to-press', {
    template: `&lt;span class="col-3 p-2 bg-light border" :class="{ 'bg-dark': isActive }" @mousedown="emitPanMode()"  @touchstart="emitPanMode()" @mousemove="setActive()" @touchmove="setActive()"&gt;&amp;nbsp;&lt;/span&gt;`,
    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;
      }
    }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    -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 */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;
  &lt;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"&gt;
  &lt;div id="app" class="container py-4" @mouseup="togglePanMode(false)" @touchend="togglePanMode(false)"&gt;
    &lt;div class="row"&gt;
      &lt;to-press v-for="i of 12" :key="i" @on-pan="togglePanMode(true)" :is-pan="panMode" /&gt;
    &lt;/div&gt;
    &lt;p&gt;Click/touch a rectangle, hold and drag accross&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any insight on how to handle the touch the same way as with the mouse ? Anything I'm missing ?</p>