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

来源：互联网发布：js获取页面滚动条位置编辑：程序博客网时间：2024/05/20 21:46

如果我们希望一个对象被长按的时候不会触发点击事件，如果你同时绑定上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之间的时间间隔，然后根据不同的时间间隔来实现不同的效果，是不是很简单！！！！！·~~~~~~~

0 0