在uniapp中實(shí)現(xiàn)長按事件（屏蔽點(diǎn)擊事件）
問題
- 在uniapp使用官方提供的長按點(diǎn)擊事件時(shí)會(huì)觸發(fā)點(diǎn)擊事件
<view @longpress="longpress">
<text>點(diǎn)擊我</text>
</view>
longpress() {
console.log("長按事件");
},
這樣使用在元素上只綁定了長按事件時(shí)沒有任何問題，但如果元素上同時(shí)綁定的單擊事件就無法區(qū)分文章來源：http://www.zghlxwxcb.cn/news/detail-601684.html
解決
原理
- 點(diǎn)擊事件在點(diǎn)擊結(jié)束后才會(huì)觸發(fā)。
- 長按事件在點(diǎn)擊持續(xù)一定時(shí)間后就會(huì)觸發(fā)
方案
我們可以定義一個(gè)記錄是否是長按的變量，在觸發(fā)點(diǎn)擊事件后判斷是否觸發(fā)了長按。如果是就什么都不做，如果不是正常執(zhí)行邏輯。文章來源地址http://www.zghlxwxcb.cn/news/detail-601684.html
代碼
<!-- @touchend 是為了在點(diǎn)擊結(jié)束后執(zhí)行將記錄長按變量重寫變?yōu)?false，等待下一次點(diǎn)擊 -->
<view @longpress="longpress" @click="click()" @touchend="touchend">
<text>點(diǎn)擊我</text>
</view>
export default {
data() {
return {
islongPress: false, //長按記錄變量
};
},
methods: {
longpress(){
console.log("長按事件");
this.islongPress = true;
},
click(){
if(this.islongPress == false){
console.log("不是長按事件");
}else if(this.islongPress == true){
console.log("長按事件");
}
},
touchend(){
//延時(shí)執(zhí)行為了防止 click() 還未判斷 islongPress 的值就被置為 fasle
setTimeout(() => {
this.islongPress = false
}, 200)
}
}
}
到了這里，關(guān)于在uniapp中實(shí)現(xiàn)長按事件（屏蔽點(diǎn)擊事件）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
