1.可能在業(yè)務(wù)中會碰見這樣的事情? 就是用戶雙擊 可以觸發(fā)事件 單擊也可以觸發(fā)事件? 問題是倆次要觸發(fā)不同的事件?

其實(shí)雙擊和單擊的卻別就是 雙擊是倆次 時間間隔特別小的 點(diǎn)擊 組成的? 這樣我們可以通過 一次性定時器完成

通過綁定一次方法 來實(shí)現(xiàn)不同的操作

頁面上

<button?@click="click">用戶單擊/雙擊</button>? ? // 用戶單擊 和雙擊都會觸發(fā)click事件? 但執(zhí)行不同的操作

首先 在定義一個

var timer=null;

data(){

? ? ? dbClick:false

}

// 一般倆次點(diǎn)擊時間間隔小于300? 視為用戶雙擊了

click(){

????????????????clearTimeout(timer);? // 這里防抖節(jié)流? 存在之前的定時器 先清除掉

????????????????this.dbClick=!this.dbClick;? ?//? 第一次點(diǎn)擊 先取反

????????????????timer=setTimeout(()=>{? ? // 使用異步函數(shù)的操作

????????????????????if(this.dbClick==true){? ? ? // 如果在300毫秒內(nèi)用戶沒有點(diǎn)擊 那么就是 true

????????????????????????console.log('用戶點(diǎn)擊')

????????????????????}else{? ? ? ? ? ? ? ? ? ? ? ? ?//? 否則用戶再一次點(diǎn)擊了 將其轉(zhuǎn)換成初始的false狀態(tài)?就是雙擊了

????????????????????????console.log('用戶雙擊')

????????????????????}

????????????????????this.dbClick=false;? ? // 讓其重新歸位? ?保持原來的樣式 如果不歸位 變成 true的話? 后面會出問題

????????????????},300)

????????????},

上面這種方法?是?用定時器模擬雙擊?事件?

2.或者使用vue自帶的雙擊事件 @dblclick="dblclick"?

<button? @dblclick="dblclick">雙擊事件</button>

dblclick(){

????????????????console.log('用戶雙擊')?

???}

總結(jié)

以上是生活随笔為你收集整理的vue中解决用户双击鼠标触发事件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。