移动端实现长按选择

一、前置知识

touchstart 事件：在用户触摸一个元素时发生。
touchend事件：在用户从元素上移开手指时会发生。
touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。
注意 ： 这几个事件仅适用于带有触摸屏的设备。

二、具体实现

 最近接到一个需求，需要在手机的列表实现长按选择删除，于是就想到了使用者三个事件结合一个定时器

思路 ：在触摸到屏幕的时候开启一个定时器setTimeout，设置为0.5秒后执行定时器回调进入编辑状态，如果触摸到屏幕的时候手指移开或者滑动屏幕就清除定时器；

代码实现：

// 定义好这三个事件
<div class="record-list-item"  v-for="(item,index) in records" :key="index"  @touchstart="selectRecordItem($event)" @touchend="reduceEnd" @touchmove="gtouchmove">
.......
</div>
.....
// 在methods中定义好这几个事件
// 长按选择某一项
selectRecordItem(e) {
  this.timeOutEvent = setTimeout(() => {
  	this.isEditRecord = true  // isEditRecord 是否进入编辑状态
    clearTimeout(this.timeOutEvent)
  }, 500)
},
// 长按结束（清除定时器）
reduceEnd() {
   clearTimeout(this.timeOutEvent)
},
// 长按移动（清除定时器）
gtouchmove() {
  clearTimeout(this.timeOutEvent)
},

三、最终效果

QQ视频20230918114646