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

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

效果

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

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

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

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

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

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

那么～ 简单粗暴，看代码

wxml：

[html] view plain copy

print?

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. <!--</navigator>-->
20. </view>
21. </scroll-view>
22. <navigator class="btn" url="{{page_edit}}"> 新增</navigator>

主要看

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

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

最最最重要的wxjs即将来临，噔噔噔噔～

[javascript] view plain copy

print?

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. },

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