vue鼠標(biāo)懸停事件監(jiān)聽(tīng)實(shí)現(xiàn)方法
前言
開(kāi)發(fā)框架為 vue2.x
情景描述
需求是這樣的：頁(yè)面在鼠標(biāo)懸停（不動(dòng)）n秒之后，頁(yè)面進(jìn)行相應(yīng)的事件。
比如在我的需求下，是鼠標(biāo)懸停15秒之后，頁(yè)面上三個(gè)數(shù)據(jù)彈窗輪詢展示。
解決方法
我的思路中 涉及到了三個(gè)變量
data(){
return {
polling: null,
timeCount: 0,
judgeTimer: null,
}
}
polling： 是 輪詢的時(shí)候的一個(gè)計(jì)時(shí)器
timeCount： 是 判斷鼠標(biāo)是否移動(dòng)的一個(gè)控制變量
judgeTimer：是 判斷鼠標(biāo)是否移動(dòng)的一個(gè)計(jì)時(shí)器
只要鼠標(biāo)進(jìn)行了移動(dòng)，那么 timeCount就會(huì)發(fā)生變化。
若是15秒內(nèi) timeCount沒(méi)有發(fā)生變化，那么就說(shuō)明此刻鼠標(biāo)處于懸停狀態(tài)，就可以進(jìn)行運(yùn)行懸停的事件
那么 對(duì)于鼠標(biāo)移動(dòng) 我們可以給元素綁定 mousemove事件
mouseMove() {
clearTimeout(this.judgeTimer);
clearInterval(this.polling);
this.timer = null;
this.polling = null;
this.timeCount = ++this.timeCount % 100;
},
那么對(duì)于 timeCount 怎么知道是多久未發(fā)生變化呢？
我們可以在watch下對(duì)其進(jìn)行監(jiān)聽(tīng)
watch: {
timeCount: {
handler() {
this.judgeTimer = null;
this.polling = null;
clearTimeout(this.judgeTimer);
clearInterval(this.polling);
this.judgeTimer = setTimeout(() => {
this.play();
}, delay);
},
},
},
至于我嘛的 play 函數(shù) 就是我們的具體業(yè)務(wù)部分了，在play函數(shù)內(nèi)編寫(xiě)輪詢的業(yè)務(wù)，使用 polling 作為計(jì)時(shí)器。
play() {
clearInterval(this.polling);
this.polling = setInterval(() => {
// 具體業(yè)務(wù)代碼
}, delay);
},
總結(jié)
到此這篇關(guān)于vue鼠標(biāo)懸停事件監(jiān)聽(tīng)的文章就介紹到這了,更多相關(guān)vue鼠標(biāo)懸停事件監(jiān)聽(tīng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue-router中hash模式與history模式的區(qū)別
為了構(gòu)建 SPA（單頁(yè)面應(yīng)用）,需要引入前端路由系統(tǒng),這就是 Vue-Router 存在的意義,而這篇文章主要給大家介紹了關(guān)于vue-router中兩種模式區(qū)別的相關(guān)資料，分別是hash模式、history模式,需要的朋友可以參考下2021-06-06
vue 項(xiàng)目全屏插件screenfull使用案例
這篇文章主要介紹了vue 項(xiàng)目全屏插件screenfull使用案例,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
這篇文章主要給大家介紹了關(guān)于vue中組件的3種使用方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要介紹了vue中require與import的區(qū)別詳解,require相當(dāng)于module.exports的傳送門(mén),module.exports后面的內(nèi)容是什么,require的結(jié)果就是什么,對(duì)象、數(shù)字、字符串、函數(shù),再把require的結(jié)果賦值給某個(gè)變量,需要的朋友可以參考下2023-10-10
基于Vue3定制復(fù)雜組件滾動(dòng)條的實(shí)現(xiàn)
這篇文章主要介紹了如何利用vue3定制復(fù)雜組件的滾動(dòng)條，文中通過(guò)示例代碼講解詳細(xì)，需要的朋友們下面就跟隨小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
ant design vue 清空upload組件圖片緩存的問(wèn)題
這篇文章主要介紹了ant design vue 清空upload組件圖片緩存的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue.js組件tab實(shí)現(xiàn)選項(xiàng)卡切換
這篇文章主要為大家詳細(xì)介紹了Vue.js組件tab實(shí)現(xiàn)選項(xiàng)卡切換的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
vue通過(guò)elementUI組件實(shí)現(xiàn)圖片預(yù)覽效果
我們?cè)陂_(kāi)發(fā)中經(jīng)常會(huì)遇到通過(guò)點(diǎn)擊某個(gè)按鈕或者文字實(shí)現(xiàn)圖片的預(yù)覽功能,這里我們分別介紹vue2和vue3里面如何實(shí)現(xiàn)圖片預(yù)覽方法,需要的朋友可以參考下2023-09-09
vue+springboot實(shí)現(xiàn)圖形驗(yàn)證碼Kaptcha的示例
圖形驗(yàn)證碼是做網(wǎng)站常用的功能,本文主要介紹了vue+springboot實(shí)現(xiàn)圖形驗(yàn)證碼Kaptcha的示例,具有一定的參考價(jià)值,感興趣的可以了解一下2023-11-11
vue-electron使用serialport時(shí)問(wèn)題解決方案
這篇文章主要介紹了vue-electron使用serialport時(shí)問(wèn)題解決方案,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09