vue Touch长按事件

最新推荐文章于 2024-06-27 14:56:52 发布

qq_27449993

最新推荐文章于 2024-06-27 14:56:52 发布

阅读量1.5k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_27449993/article/details/89145734

版权

本文介绍了如何在Vue.js应用中实现长按事件，包括使用原生JavaScript结合Vue自定义指令，以及利用第三方库如v-touch实现触摸设备上的长按操作。通过这些方法，开发者可以为移动应用增加更多的交互体验。

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

 <li  v-for="(item,index) in conList" :key="item.id" class=""  @touchstart="touchstartFun($event)" @touchleave="touchmoveFun($event)" @touchend="touchendFun($event,item,index)" ><li>

  data () {
    return {
      date: '',
      checkboxInput: false,
      delectList: false,
      topHeight: 0,
      timeOutEvent: 0,
      touchX: 0,
      touchY: 0,
      touchZ: 0
    }
  },
  methods: {
    touchendFun (e, item, index) {
      if (e.preventDefault) {
        e.preventDefault()
      } else e.returnValue = false
      if (this.touchZ !== 1) {
        clearTimeout(this.timeOutEvent)
        this.touchX = 0
        this.touchY = 0
        if (!e.target.getAttribute('checkclick')) {
          if (this.timeOutEvent !== 0) {
            this.timeOutEvent = 0
            this.listFun(item