微信小程序-双击长按longtap事件与tap事件冲突的解决办法

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

效果

微信小程序-双击长按longtap事件与tap事件冲突的解决办法微信小程序-双击长按longtap事件与tap事件冲突的解决办法微信小程序-双击长按longtap事件与tap事件冲突的解决办法

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

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

 

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

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

 

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

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

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

那么~ 简单粗暴,看代码 

wxml:

 

[html] view plain copy
 
 print?微信小程序-双击长按longtap事件与tap事件冲突的解决办法微信小程序-双击长按longtap事件与tap事件冲突的解决办法
  1. <scroll-view class="position_common_info" scroll-y="true">  
  2.   <view class="line" style="margin-top:30rpx;">  
  3.   </view>  
  4.   <view wx:for="{{common_position}}" bindtouchstart="mytouchstart" bindtouchend="mytouchend" bindtap="editAddress" data-name="{{item.name}}" data-positionId="{{item.positionId}}" data-gendar="{{item.gendar}}" data-contactTel="{{item.contactTel}}" data-addressName="{{item.addressName}}"  
  5.   data-customerDesc="{{item.customerDesc}}" data-city="{{item.city}}" data-uid="{{item.uid}}" data-addressAddr="{{item.addressAddr}}" data-positionId="{{item.positionId}}">  
  6.     <!--<navigator url="/pages/order/address/add_address/add_address?name={{item.name}}  
  7.       &gendar={{item.gendar}}&contactTel={{item.contactTel}}&addressName={{item.addressName}}  
  8.       &customerDesc={{item.customerDesc}}&city={{item.city}}&uid={{item.uid}}  
  9.       &addressAddr={{item.addressAddr}}&positionId={{item.positionId}}">-->  
  10.     <view class="address_text">  
  11.       <text class="name">{{item.name}}</text>  
  12.       <text class="name" wx:if="{{item.gendar==‘1‘}}">先生</text>  
  13.       <text class="name" wx:else>女士</text>  
  14.       <text class="tel">{{item.contactTel}}</text>  
  15.       <view class="address">{{item.addressName}}</view>  
  16.     </view>  
  17.     <image class="icon_edit" src="{{imgUrls_edit_original}}"></image>  
  18.     <view class="lines"></view>  
  19.   
  20.     <!--</navigator>-->  
  21.   </view>  
  22. </scroll-view>  
  23. <navigator class="btn" url="{{page_edit}}"> 新增</navigator>  


主要看

 

<view wx:for="{{common_position}}" bindtouchstart="mytouchstart" bindtouchend="mytouchend" bindtap="editAddress" >

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

 

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

 

 

[javascript] view plain copy
 
 print?微信小程序-双击长按longtap事件与tap事件冲突的解决办法微信小程序-双击长按longtap事件与tap事件冲突的解决办法
  1. editAddress: function (event) {  
  2.    let that = this;  
  3.    //触摸时间距离页面打开的毫秒数  
  4.    var touchTime = that.data.touch_end - that.data.touch_start;  
  5.    console.log(touchTime);  
  6.    //如果按下时间大于350为长按  
  7.    if (touchTime > 350) {  
  8.      wx.showModal({  
  9.        title: ‘提示‘,  
  10.        content: ‘是否删除该地址‘,  
  11.        success: function (res) {  
  12.          if (res.confirm) {  
  13.            app.func.req(‘delUserPosition?tel=‘ + ‘13999999999‘ + ‘&positionId=‘ + event.currentTarget.dataset.positionid, function (res) {  
  14.              if (res.data.result == ‘false‘) {  
  15.                console.log(res.data.msg);  
  16.                wx.showToast({  
  17.                  title: res.data.msg,  
  18.                  icon: ‘success‘,  
  19.                  duration: 2000  
  20.                })  
  21.              } else {  
  22.                that.loadData();  
  23.              }  
  24.            }, function (res) {  
  25.              console.log(res.data);  
  26.            });  
  27.          }  
  28.        }  
  29.      })  
  30.    } else {  
  31.      wx.navigateTo({  
  32.        url: ‘/pages/order/address/add_address/add_address?name=‘ + event.currentTarget.dataset.name  
  33.        + ‘&gendar=‘ + event.currentTarget.dataset.gendar  
  34.        + ‘&contactTel=‘ + event.currentTarget.dataset.contacttel  
  35.        + ‘&addressName=‘ + event.currentTarget.dataset.addressname  
  36.        + ‘&customerDesc=‘ + event.currentTarget.dataset.customerdesc  
  37.        + ‘&city=‘ + event.currentTarget.dataset.city  
  38.        + ‘&uid=‘ + event.currentTarget.dataset.uid  
  39.        + ‘&addressAddr=‘ + event.currentTarget.dataset.addressaddr  
  40.        + ‘&positionId=‘ + event.currentTarget.dataset.positionid,  
  41.      })  
  42.    }  
  43.  },  
  44.  //按下事件开始  
  45.  mytouchstart: function (e) {  
  46.    let that = this;  
  47.    that.setData({  
  48.      touch_start: e.timeStamp  
  49.    })  
  50.    console.log(e.timeStamp + ‘- touch-start‘)  
  51.  },  
  52.  //按下事件结束  
  53.  mytouchend: function (e) {  
  54.    let that = this;  
  55.    that.setData({  
  56.      touch_end: e.timeStamp  
  57.    })  
  58.    console.log(e.timeStamp + ‘- touch-end‘)  
  59.  },  
微信小程序-双击长按longtap事件与tap事件冲突的解决办法


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

 

 

微信小程序-双击长按longtap事件与tap事件冲突的解决办法

上一篇:个人如何免费申请一个微信小程序账号进行开发尝鲜


下一篇:C#开发微信门户及应用(41)--基于微信开放平台的扫码登录处理