关于vue.js:Vue-移动端的长按与触摸事件

Vue 挪动端的长按与触摸事件

博客阐明

文章所波及的材料来自互联网整顿和集体总结，意在于集体学习和教训汇总，如有什么中央侵权，请分割自己删除，谢谢！

阐明

在手机端的需要难免会遇到与手势相干的，比方 div 的长按和单击事件，长按可能是分享或者删除等操作，个别的模式是通过弹窗来展示。

实现

其实次要是利用 dom 的触摸事件，touchstart，touchmove，touchend

代码

<template>
  <div>
    <div class="btn-long" @touchstart="handlerTouchstart" @touchmove="handlerTouchmove" @touchend="handlerTouchend"> 长按我 </div>
    <div v-if="clickShow"> 单击 </div>
    <div v-if="longClickShow"> 双击 </div>
  </div>
</template>

<script>

export default {
  name: 'LongTouch',
  data () {
    return {
      // 定时器
      loop: 0,
      clickShow: false,
      longClickShow: false
    }
  },
  methods: {handlerTouchstart () {this.loop = setTimeout(() => {
        this.loop = 0
        // 执行长按要执行的内容
        this.clickShow = false
        this.longClickShow = true
      }, 500) // 定时的工夫
      return false
    },
    handlerTouchmove () {
      // 革除定时器
      clearTimeout(this.loop)
      this.loop = 0
    },
    handlerTouchend () {
      // 革除定时器
      clearTimeout(this.loop)
      if (this.loop !== 0) {
        // 单击操作
        this.clickShow = true
        this.longClickShow = false
      }
    }
  }
}
</script>

<style scoped>

.btn-long {
  width: 200px;
  height: 30px;
  background-color: red;
}
</style>

演示

发现在长按时，会呈现选中文字的成果，这比拟影响体验。

优化体验

在 css 中退出款式，这样就不会呈现选中的成果了。

* {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

感激

万能的网络

以及勤奋的本人，集体博客，GitHub 测试，GitHub

公众号 - 归子莫，小程序 - 小归博客