vue長(zhǎng)按事件和點(diǎn)擊事件沖突的解決

更新時(shí)間：2022年10月24日 09:32:05 作者：冒泡的大白鯨

這篇文章主要介紹了vue長(zhǎng)按事件和點(diǎn)擊事件沖突的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

長(zhǎng)按事件和點(diǎn)擊事件沖突的解決

使用場(chǎng)景

在使用vue做移動(dòng)端開(kāi)發(fā)時(shí)，遇到了長(zhǎng)按事件和點(diǎn)擊事件沖突的問(wèn)題。

具體需求

點(diǎn)擊標(biāo)簽時(shí)選中標(biāo)簽，再次點(diǎn)擊時(shí)取消選擇，因標(biāo)簽名稱過(guò)長(zhǎng)，長(zhǎng)按標(biāo)簽使用tooltip顯示完整標(biāo)簽名稱。

代碼說(shuō)明

長(zhǎng)按是用touchstart事件和touchend事件來(lái)實(shí)現(xiàn)的。在touchstart事件里使用setTimeout,時(shí)間設(shè)置為長(zhǎng)按生效的時(shí)間就可以了，下面上代碼。

HTML部分

關(guān)于這里的.prevent修飾符，是用來(lái)阻止默認(rèn)動(dòng)作。但這里我試過(guò)，不加在電腦端運(yùn)行時(shí)會(huì)有異常，手機(jī)端沒(méi)有影響，最好還是加上吧。

? ? <div v-for="(item, index) in List" class="flex a-center j-center" >
? ? ? ? ? ?<van-tag ? v-if="!item.selected"
? ? ? ? ? ?@touchstart.prevent="goTouch(item.name)" ?
? ? ? ? ? ?@touchend.prevent="outTouch(index)"
? ? ? ? ? ? >
? ? ? ? ? ? <span >{{ item.name }}</span>
? ? ? ? ? ? </van-tag>
? ? ? ??
? ? ? ? ? ? <van-tag v-if="item.selected" ? color="blue"?
? ? ? ? ? ? ?@touchstart.prevent="goTouch(item.name)"
? ? ? ? ? ? ?@touchend.prevent="outTouch(index)"?
? ? ? ? ? ? ?>
? ? ? ? ? ? <span>{{ item.name }}</span>
? ? ? ? ? ? </van-tag>
? ? </div>

JS部分

當(dāng)點(diǎn)擊標(biāo)簽時(shí)，timer的值不為0，執(zhí)行單次點(diǎn)擊事件，長(zhǎng)按一秒時(shí)將timer設(shè)置為0，則只執(zhí)行長(zhǎng)按事件。這樣就解決了長(zhǎng)按事件和點(diǎn)擊事件的沖突。

data(){
?return{
?timer:0
?}
},
methods:{
//touchstart 事件
goTouch(v) {
? ? ? this.timer = setTimeout(() => {
? ? ? ? this.timer = 0
? ? ? ? //執(zhí)行長(zhǎng)按事件
? ? ? }, 1000);
? ? ? return false
?},
?
?//touchend事件
? ? outTouch(index) {
? ? ? clearTimeout(this.timer);
? ? ? if(this.timer!=0){
? ? ? //執(zhí)行單次點(diǎn)擊事件
? ? ? }
? ? ? return false
?}
}

vue web端長(zhǎng)按事件，解決和click沖突

? <div
? ? ? ? ? class="main_content"
? ? ? ? ? @mousedown="loopZoom()"
? ? ? ? ? @mouseup="clearLoopZoom()"
? ? ? ? ? @click="handlerZoom()"
? ? ? ? >
? ? ? ? ? 測(cè)試長(zhǎng)按
? ? ? ? </div>

? ?handlerZoom() {
? ? ? ? if (this.flag) {
? ? ? ? ? console.log('執(zhí)行click事件')
? ? ? ? }
? ? ? ? this.flag = false
? ? },
? ? loopZoom() {
? ? ? console.log("長(zhǎng)按開(kāi)始咯")
? ? ? this.firstTime = new Date().getTime()
? ? ? this.timeOut = setTimeout(() => {
? ? ? console.log("長(zhǎng)按事件")
? ? ? }, 800);
? ? },
? ? clearLoopZoom() {
? ? ? console.log("長(zhǎng)按結(jié)束咯")
? ? ? this.lastTime=new Date().getTime()
? ? ? if (this.lastTime - this.firstTime < 100) {
? ? ? ? ? this.flag=true
? ? ? ? }
? ? ? clearTimeout(this.timeOut);
? ? ? this.timeOut = "";
? ? ? clearInterval(this.setIntervals);
? ? ? this.setIntervals = "";
? ? },

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: