javascript - Handling touchstarttouchmovetouchend the same way as mousedownmousemovemouseup - Stack Overflow

admin管理员组

文章数量:1327807

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.

Vueponent('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=".5.17/vue.js"></script>
<link rel="stylesheet" href=".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>

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.ponent('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./ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn./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 ?

• javascript
• vue.js
• event-handling
• mouseevent
• touch-event

Share Improve this question Follow asked Aug 30, 2019 at 8:23 Pierre BurtonPierre Burton 2,08422 gold badges1717 silver badges3030 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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

See this example

Vue.ponent('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./ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn./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>

本文标签： javascriptHandling touchstarttouchmovetouchend the same way as mousedownmousemovemouseupStack Overflow