微信小程序--长按事件bindlongtap与点击事件bindtap的冲突

RubyCat-Max

于 2017-08-02 17:51:48 发布

阅读量1.7w

点赞数 4

分类专栏：微信小程序文章标签：微信微信小程序

本文链接：https://blog.csdn.net/qq_32733763/article/details/76590048

版权

微信小程序专栏收录该内容

4 篇文章 0 订阅

订阅专栏

对于同一控件同时设置bindtap和bindlongtap,会发现长按时先出现bindlongtap的事件，然后触发点击事件。

通过测试，我们发现，小程序中事件执行的顺序是
点击：touchstart → touchend → tap
长按 touchstart → longtap → touchend → tap

处理方法：

// wxml
<view bindtouchstart="bindTouchStart" bindtouchend="bindTouchEnd" bindlongtap="bingLongTap" bindtap="bindTap">蹂躏我</view>

// js
bindTouchStart: function(e) {
    this.startTime = e.timeStamp;
}
bindTouchEnd: function(e) {
    this.endTime = e.timeStamp;
}
bindTap: function(e) {
    if(this.endTime  - this.startTime < 350) {
        console.log("点击")
    }
}
bingLongTap: function(e) {
    console.log("长按");
}