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

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