Vue移动端长按事件

页面布局如下：

   

      
      

      
长按3秒认证你的跑者级别
    

说明：因为这里是长按一张指纹图片，移动端长按图片会提示“保存图片”，虽然不影响跳转，但是会误导用户。所以这里用了一个div遮罩在图片上，但可能还是会提醒“选择复制”，不过这种也不会误导用户啦，毕竟确实是长按了。

下面就是事件处理了，也很简单：

data () {
    return {
      timeOutEvent: 0 // 长按事件定时器
    }
  },
methods: {
   gtouchstart () {
      // 开始触摸
      this.timeOutEvent = setTimeout(() => {
        // 长按3秒
        this.timeOutEvent = 0
        this.$router.push('/result')
      }, 3000)
    },
    gtouchmove () {
      // 看具体需求
      // clearTimeout(this.timeOutEvent)
      // this.timeOutEvent = 0
    },
    gtouchend () {
      clearTimeout(this.timeOutEvent)
      this.timeOutEvent = 0
    }
}

简单的实现就不放demo链接了，copy一下就可以测试了。