vue 长按删除事件

最新推荐文章于 2023-05-26 12:10:57 发布

cloud_sugar

最新推荐文章于 2023-05-26 12:10:57 发布

阅读量367

点赞数 1

文章标签： html javascript vue

本文链接：https://blog.csdn.net/cloud_sugar/article/details/129763925

版权

文章介绍了在移动端Web开发中，如何使用touchstart、touchmove和touchend事件处理用户触摸屏幕的行为。通过Vue.js框架，实现长按显示和删除功能。当touchstart触发时设置定时器，若在规定时间内触发touchend则清除定时器，否则执行长按操作。同时，在touchmove事件中清除定时器以防止误操作。

摘要由CSDN通过智能技术生成

touchstart：当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。
touchmove：当手指在屏幕上滑动时连续地触发。在这个事件发生期间，调用preventDefault() 可以阻止滚动。
touchend：当手指从屏幕上移开时触发。

<li v-for="(item, index) in historylists" :key="item.id" @touchstart="gtouchstart(index)" @touchend="cleartouchend()" @touchmove="gtouchmove()">
            {{ item.name }}
            <div @click="move(item.id)"><span :id="index" v-show="xx" class="iconfont">&#xe604;</span></div>
          </li>

  //  开始触摸屏幕
    gtouchstart(index) {
      // 设置定时器，500毫秒触发长按事件
      this.time = setTimeout(() => {
        this.showxx(index) // 在定时器中要做的事 调用
      }, 500)
      return false
    },
    // 触摸屏幕离开
    cleartouchend() {
      //  如果在500秒内释放就取消长按事件，清除定时器
      clearTimeout(this.time)
      // if(this.item!=0) return false
    },
    // 手指在屏幕上移动
    gtouchmove() {
      // 如果手指移动就 清除定时器
      clearTimeout(this.item)
      // this.item=0
    },
    // 长按显示x号
    showxx(index) {
      // 在真正长按后执行的内容
      //  this.item=0
      document.getElementById(index).style.display = 'block'
    },
    // 长按删除
    move(id) {
      this.historylist = this.historylist.filter((item) => item.id !== id)
    }