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

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

通過綁定一次方法 來實現不同的操作

頁面上

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

首先 在定義一個

var timer=null;

data(){

? ? ? dbClick:false

}

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

click(){

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

????????????????this.dbClick=!this.dbClick;? ?//? 第一次點擊 先取反

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

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

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

????????????????????}else{? ? ? ? ? ? ? ? ? ? ? ? ?//? 否則用戶再一次點擊了 將其轉換成初始的false狀態?就是雙擊了

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

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

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

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

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

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

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

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

dblclick(){

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

???}

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。