微信小程式單擊事件與長按事件衝突的解決辦法
阿新 • • 發佈:2021-11-12
眾所周知,在小程式中,長按事件一鬆手是會觸發單擊事件的,而在我們的實際需求中,往往是需要單擊事件和長按事件並存的。
然而,小程式卻又好像想到了這種情況似的,給了我們一個觸控開始,一個觸控結束
也就是,一共有四個事件:
- bindtouchstart:觸屏開始
- bindtouchend :觸屏結束
- bindlongtap:長按事件
- catchtap:單擊事件
這就給了我們手動區別長按與單擊的可能
我們希望的效果是:
1.單擊就是單擊,沒有什麼可解釋的
2.長按事件觸發後就不要單擊事件再觸發了。
ok,我是這麼做的:
1.首先做兩個變數,一個用來控制單擊是否可用,一個用來檢查長按是否被觸發
//page data data: { taplock: false, //單擊鎖,當此值為false時,單擊不生效 longtap: false,//是否觸發了長按 }
2.在各個事件中一頓操作
tap(e) { if (this.data.taplock) console.log("單擊事件觸發") }, // 長按事件 longtap() { console.log("locked") this.data.taplock = false //當長按事件觸發後,鎖定單擊 this.data.longtap = true }, // 觸控開始 touchStart() { this.data.taplock = true //開啟單擊 this.data.longtap = false //初始化長按事件觸發狀態 console.log("觸控開始") }, // 觸控結束 touchEnd() { if (this.data.longtap) console.log("觸控結束") //如果長按觸發了,那麼正常結束就好了 else this.data.taplock = true //如果長按沒觸發,說明是單擊,開啟單擊鎖 },
親測可用,完美解決