VUE--移动端长按事件（超清晰）

本文链接：https://blog.csdn.net/weixin_58433280/article/details/124044548

本文介绍了如何在移动端应用中处理默认的长按事件，通过CSS禁用文本选择，并使用Vue.js实现自定义长按功能。通过@touchstart、@touchmove和@touchend事件监听，配合setTimeout和clearTimeout实现长按与短按的区分，从而在500毫秒内松手时执行点击事件，长按时执行长按事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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("长按");
    },