1.去掉默认事件

     首先特别要注意的一点就是,在移动端存在其默认的长按事件(比如:文字部分的长按选择文字),这便容易和我们的业务需求产生冲突,我们首先要做的就是先去掉它(可以加在App.vue的全局默认样式中,以便达到更好的效果)。

-webkit-touch-callout: none !important;
-webkit-user-select: none;

     接下来就一睹为快吧。

2.标签部分

<p
   @touchstart="gtouchstart(item)"
   @touchmove="gtouchmove()"
   @touchend="showDeleteButton(item)"
 >测试</p>

3.methods部分

//长按事件(起始)
    gtouchstart(item) {
      var self = this;
      this.timeOutEvent = setTimeout(function () {
        self.longPress(item);
      }, 500); //这里设置定时器,定义长按500毫秒触发长按事件
      return false;
    },
    //手释放,如果在500毫秒内就释放,则取消长按事件,此时可以执行onclick应该执行的事件
    showDeleteButton(item) {
      clearTimeout(this.timeOutEvent); //清除定时器
      if (this.timeOutEvent != 0) {
        //这里写要执行的内容(如onclick事件)
        console.log("点击但未长按");
      }
      return false;
    },
    //如果手指有移动,则取消所有事件,此时说明用户只是要移动而不是长按
    gtouchmove() {
      clearTimeout(this.timeOutEvent); //清除定时器
      this.timeOutEvent = 0;
    },
    //真正长按后应该执行的内容
    longPress(val) {
      this.timeOutEvent = 0;
      //执行长按要执行的内容,如弹出菜单
      console.log("长按");
    },

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐