小程序之解决移动端点击和长按事件冒泡问题

最新推荐文章于 2025-06-26 21:58:39 发布

置顶 u013035477

最新推荐文章于 2025-06-26 21:58:39 发布

阅读量7.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端

本文链接：https://blog.csdn.net/songsong189/article/details/59064103

Web前端专栏收录该内容

56 篇文章

订阅专栏

本文介绍了一种解决小程序中长按与点击事件冲突的方法。通过自定义事件处理，可以区分长按与点击行为，实现不同的功能响应，如长按时删除对象，点击时跳转页面。

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

如果我们希望一个对象被长按的时候不会触发点击事件，如果你同时绑定上bindtap事件和bindlongtap事件的话这里会有一个问题就是不管你有没有点击，长按的时候就会触发点击事件，我们有一个需求就是在点击的时候跳转页面，但是在长按的时候删除某个对象。

所以这个时候我们就要考虑自己封装了

wxml

<image class="book-image" src="{{item.img_path}}" mode="scaleToFill" bindtouchstart="mytouchstart" bindtouchend="mytouchend" catchtap="toDetail" hidden="{{isShow}}"  data-goodId="{{item.goods_id}}" ></image>

.js

  toDetail:function(options){
    let that = this;
    //触摸时间距离页面打开的毫秒数
    var touchTime = that.data.touch_end - that.data.touch_start;
    console.log(touchTime);
    var goodId=options.target.dataset.goodid;
    if(touchTime<350){
      console.log(goodId)
      var goodUrl='../book-detail/book-detail?bookid='+goodId;
      wx.navigateTo({
        url:goodUrl
      });
    }else{
      this.setData({
        isShow:true
      })
    }

  },

mytouchstart: function (e) {
    let that = this;
    that.setData({
      touch_start: e.timeStamp
    })
    console.log(e.timeStamp + '- touch-start')
  },
  //按下事件结束
  mytouchend: function (e) {
    let that = this;
    that.setData({
      touch_end: e.timeStamp
    })
    console.log(e.timeStamp + '- touch-end')
  },

原理就是利用e.timeStamp来获取start和end之间的时间间隔，然后根据不同的时间间隔来实现不同的效果，是不是很简单！！！！！·~~~~~~~