微信小程序開發(fā)說實(shí)話還是有點(diǎn)糟心的,經(jīng)過時間冒泡的坑之后,又遇到了長按事件(longtap)必觸發(fā)點(diǎn)擊事件(tap)的BUG 如下代碼
<viewclass="container"> <view> <buttonbindtap="tap"bindlongtap="longtap">長按我</button> </view> </view>
Page({ data: { }, tap: function(){ console.log('觸發(fā)了 tap') }, longtap: function(){ console.log('觸發(fā)了 longtap') } })
解決方法Google后確定是BUG后,看了一下網(wǎng)上的解決方法,基本都是通過 touchstart 和 touchend重新判定 tap 和 longtap 事件的,個人不是很喜歡。 看一下微信小程序的事件定義:
也就是說,目前的觸發(fā)的順序是 longtap -> touchend -> tap 那么其實(shí)解決也很清晰了,簡單來說就是 加把鎖 , 應(yīng)用到上面的代碼上: Page({ data: { lock: false }, tap: function(){ //檢查鎖 if (this.data.lock) { return; } console.log('觸發(fā)了 tap') }, touchend: function(){ if (this.data.lock) { //開鎖 setTimeout(()=> { this.setData({ lock: false }); }, 100); } }, longtap: function(){ //鎖住 this.setData({lock: true}); console.log('觸發(fā)了 longtap') } }) 看一下效果 延伸大部分情況下,我們都是不需要在 touchend 中加鎖的,因?yàn)殚L按操作會觸發(fā)其他的異步操作,只要保證異步操作的最后把鎖解除了即可。 |
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)