微信小程序长按与单击事件触发_微信小程序长按事件

方式一

wxml 片段

<view class="{{longPressTag==index?'long-press-status':''}}
      wx:for="{{searchHistory}}" wx:key="index" data-index="{{index}}"
      catchtap="onTouch"
      bindlongpress="longPress">
      {{item}}
</view>
1
2
3
4
5
6

js 片段

Page({
    onTouch: function(e) {
        //标签单击事件逻辑
    },
    longPress: function(e) {
        //标签长按事件逻辑
    }
})
1
2
3
4
5
6
7
8

解析

• tap触摸事件采用catch阻止事件冒泡
• 1.5.0之后支持longpress事件，手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发

方式二（不推荐）

• longtap事件，但在触发时会同时触发单击事件，需配合touchstart和touchend事件计算触屏开始和结束时间来使用

wxml

<view class="{{longPressTag==index?'long-press-status':''}}
      wx:for="{{searchHistory}}" wx:key="index" data-index="{{index}}"
      catchtap="onTouch"
      bindlongtap="longPress"
      bindtouchstart="touchStart"
      bindtouchend="touchEnd">
      {{item}}
</view>
1
2
3
4
5
6
7
8

js

Page({
    touchStart: function (e) {  //记录触屏开始时间
      this.setData({start:e.timeStamp })
    },
    touchEnd: function (e) {  //记录触屏结束时间
      this.setData({end: e.timeStamp })
    },
    longPress: function(e) {  //长按事件逻辑
    },
    onTouch:function(e) {
       if (this.data.end - this.data.start < 350){
          //单击事件逻辑
       }
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15