vue 模拟长按事件

最新推荐文章于 2024-05-08 13:24:57 发布

wxxmagical

最新推荐文章于 2024-05-08 13:24:57 发布

阅读量892

点赞数

文章标签： javascript html vue.js

原文链接：https://www.jianshu.com/p/1a7d245270de

版权

touch事件长按事件 H5页面 JavaScript 移动端交互

关键词由优快云通过智能技术生成

在网页中没有长按事件，但是有的页面尤其是h5页面经常需要监听长按事件，所以通过touchstart事件和touchend事件来模拟长按事件

 <!-- css -->
<div
      id="home"
      @touchstart="gotouchstart()"
      @touchmove="gotouchmove()"
      @touchend="gotouchend()"
    >
</div>

//js
	gotouchstart() {
      let that = this;
      clearTimeout(this.timeOutEvent); //清除定时器
      this.timeOutEvent = 0;
      this.timeOutEvent = setTimeout(function () {
        //执行长按要执行的内容，
        console.log("长按");
      }, 600); //这里设置定时
    },
    //手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
    gotouchend() {
      clearTimeout(this.timeOutEvent);
      if (this.timeOutEvent != 0) {
        //这里写要执行的内容（尤如onclick事件）
      }
    },
    //如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
    gotouchmove() {
      clearTimeout(this.timeOutEvent); //清除定时器
      this.timeOutEvent = 0;
    },