微信小程序-雙擊長按longtap事件與tap事件沖突的解決辦法

對於微信事件，不多說，自己看文檔https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html?t=20161122

效果

首先，注意一下微信小程序事件觸發順序

單擊	touchstart → touchend → tap
雙擊	touchstart → touchend → tap → touchstart → touchend → tap
長按	touchstart → longtap → touchend → tap

 

看到沒 所有的點擊事件必然會觸發tap - -  Are you kidding me ? 

所有的都有tap 那還有個毛線的用- -  可能我比較菜沒有悟到其中奧秘 Orz

 

解決長按，其實方法很簡單，提供兩種思路吧

1. 觸發longtap時加鎖，手指移開屏幕時解除鎖

2. 通過觸發事件來控制事件分發

那么～ 簡單粗暴，看代碼 

wxml：

 

<scroll-view class="position_common_info" scroll-y="true">
  <view class="line" style="margin-top:30rpx;">
  </view>
  <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}}"
  data-customerDesc="{{item.customerDesc}}" data-city="{{item.city}}" data-uid="{{item.uid}}" data-addressAddr="{{item.addressAddr}}" data-positionId="{{item.positionId}}">
    <!--<navigator url="/pages/order/address/add_address/add_address?name={{item.name}}
      &gendar={{item.gendar}}&contactTel={{item.contactTel}}&addressName={{item.addressName}}
      &customerDesc={{item.customerDesc}}&city={{item.city}}&uid={{item.uid}}
      &addressAddr={{item.addressAddr}}&positionId={{item.positionId}}">-->
    <view class="address_text">
      <text class="name">{{item.name}}</text>
      <text class="name" wx:if="{{item.gendar=='1'}}">先生</text>
      <text class="name" wx:else>女士</text>
      <text class="tel">{{item.contactTel}}</text>
      <view class="address">{{item.addressName}}</view>
    </view>
    <image class="icon_edit" src="{{imgUrls_edit_original}}"></image>
    <view class="lines"></view>

    <!--</navigator>-->
  </view>
</scroll-view>
<navigator class="btn" url="{{page_edit}}"> 新增</navigator>

主要看

 

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

其他都是連帶數據- -  完全可以無視

 

最最最重要的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')
 },

代碼都有備注，自己體會吧