微信小程序之解决同时绑定bindtap和bindlongtap事件bug

最新推荐文章于 2024-08-24 00:59:55 发布

z沧笙踏歌

最新推荐文章于 2024-08-24 00:59:55 发布

阅读量6.3k

点赞数 2

分类专栏：微信小程序

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

14 篇文章 0 订阅

订阅专栏

问题描述：一个元素上同时绑定了点击事件与长按事件时，当长按事件触发时，点击事件也会被触发

解决办法：记录手指点下与手指抬起之间的时间差在触发tap事件前判断时间差小于350 就触发tap 否则不处理

代码：

<button 
        bindtouchstart="handleTouchStart" 
        bindtouchend="handleTouchEnd" 
        bindlongpress="handleLongPress" 
        bindtap="handleClick">

// 手指按下
handleTouchStart: function(e) {    
    this.startTime = e.timeStamp;    
},  
 
//手指离开
handleTouchEnd: function(e) {    
    this.endTime = e.timeStamp;    
},  

// 点击事件
handleClick: function(e) {       
    if (this.endTime - this.startTime < 350) {      
        console.log("点击");    
    }  
},  
 
// 长按事件
handleLongPress: function(e) {    
    console.log("长按");  
}