微信小程序-双击长按触发longtap事件时同时触发tap事件解决办法

对于微信事件,不多说,自己看文档https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html?t=20161122

效果

微信小程序-双击长按触发longtap事件时同时触发tap事件解决办法_第1张图片微信小程序-双击长按触发longtap事件时同时触发tap事件解决办法_第2张图片微信小程序-双击长按触发longtap事件时同时触发tap事件解决办法_第3张图片

首先,注意一下微信小程序事件触发顺序

   
单击 touchstart → touchend → tap
双击 touchstart → touchend → tap → touchstart → touchend → tap
长按 touchstart → longtap → touchend → tap

看到没 所有的点击事件必然会触发tap - -  Are you kidding me ?

所有的都有tap 那还有个毛线的用- -  可能我比较菜没有悟到其中奥秘 Orz


解决长按,其实方法很简单,提供两种思路吧

1. 触发longtap时加锁,手指移开屏幕时解除锁

2. 通过触发事件来控制事件分发

那么~ 简单粗暴,看代码

wxml:


  
  
  
    
    
      {{item.name}}
      先生
      女士
      {{item.contactTel}}
      {{item.addressName}}
    
    
    

    
  

 新增

主要看

其他都是连带数据- -  完全可以无视


最最最重要的wxjs即将来临,噔噔噔噔~

 editAddress: function (event) {
    let that = this;
    //触摸时间距离页面打开的毫秒数
    var touchTime = that.data.touch_end - that.data.touch_start;
    console.log(touchTime);
    //如果按下时间大于350为长按
    if (touchTime > 350) {
      wx.showModal({
        title: '提示',
        content: '是否删除该地址',
        success: function (res) {
          if (res.confirm) {
            app.func.req('delUserPosition?tel=' + '13999999999' + '&positionId=' + event.currentTarget.dataset.positionid, function (res) {
              if (res.data.result == 'false') {
                console.log(res.data.msg);
                wx.showToast({
                  title: res.data.msg,
                  icon: 'success',
                  duration: 2000
                })
              } else {
                that.loadData();
              }
            }, function (res) {
              console.log(res.data);
            });
          }
        }
      })
    } else {
      wx.navigateTo({
        url: '/pages/order/address/add_address/add_address?name=' + event.currentTarget.dataset.name
        + '&gendar=' + event.currentTarget.dataset.gendar
        + '&contactTel=' + event.currentTarget.dataset.contacttel
        + '&addressName=' + event.currentTarget.dataset.addressname
        + '&customerDesc=' + event.currentTarget.dataset.customerdesc
        + '&city=' + event.currentTarget.dataset.city
        + '&uid=' + event.currentTarget.dataset.uid
        + '&addressAddr=' + event.currentTarget.dataset.addressaddr
        + '&positionId=' + event.currentTarget.dataset.positionid,
      })
    }
  },
  //按下事件开始
  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')
  },

代码都有备注,自己体会吧



双击事件可以参考这篇文章

http://www.cnblogs.com/nosqlcoco/p/5954453.html


你可能感兴趣的:(微信小程序)