vue实现按钮的长按功能

实现效果图：

实现思路：

• 给需要操作的 dom 元素添加touchstart(点击开始)、touchend(点击结束)、touchmove(手指移动)事件
• 在使用touchstart(点击开始)事件的时候设置定时器，在指定时间内如果不做其他操作就视为 长按事件，执行 长按事件 的同时需要设定当前不是 单击事件，以防止touchend(点击结束)执行的时候同时出现 长按事件 和 单击事件
• 在 touchend(点击结束)里面清除定时器，并判断是不是 单击事件
• 在 touchmove(手指移动)里面清除定时器，并设定当前不是 单击事件

代码

HTML

<div @touchstart="gotouchstart" @touchmove="gotouchmove" @touchend="gotouchend" class="div">按钮</div>

JS

<script>
export default {
  data() {
    return {}
  },
  methods: {
    /**
     * @Description: 长按事件
     * @Author: LiuYanQiang
     */
    gotouchstart() {
      var that = this
      window.isClick = true
      clearTimeout(that.timeOut)
      that.timeOut = setTimeout(function () {
        //that.actionSheetShow=true;//修改删除弹窗出现
        that.$toast('长按你不痛么？')
        console.log('在这里执行长按事件')
        window.isClick = false
      }, 500)
    },

    /**
     * @Description: 短按事件————手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
     * @Author: LiuYanQiang
     */
    gotouchend() {
      var that = this
      clearTimeout(that.timeOut)

      if (window.isClick) {
        //that.banksClick(index, item)
        that.$toast('短按就行了！')
      }
    },
    /**
     * @Description: 如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
     * @Author: LiuYanQiang
     */
    gotouchmove() {
      // console.log('手指移动了')
      clearTimeout(this.timeOut)
      window.isClick = false
    }
  },
  // 项目销毁前清除定时器
  beforeDestroy() {
    clearTimeout(this.timeOut)
  }
}
</script>

style（去除长按出现的文字复制影响）

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