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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u013035477/article/details/59064103

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

  

阅读更多

没有更多推荐了,返回首页