vue鼠標(biāo)懸停事件監(jiān)聽實(shí)現(xiàn)方法
前言
開發(fā)框架為 vue2.x
情景描述
需求是這樣的：頁面在鼠標(biāo)懸停（不動(dòng)）n秒之后，頁面進(jìn)行相應(yīng)的事件。
比如在我的需求下，是鼠標(biāo)懸停15秒之后，頁面上三個(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沒有發(fā)生變化，那么就說明此刻鼠標(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)聽
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)編寫輪詢的業(yè)務(wù)，使用 polling 作為計(jì)時(shí)器。
play() {
clearInterval(this.polling);
this.polling = setInterval(() => {
// 具體業(yè)務(wù)代碼
}, delay);
},
總結(jié)
到此這篇關(guān)于vue鼠標(biāo)懸停事件監(jiān)聽的文章就介紹到這了,更多相關(guān)vue鼠標(biāo)懸停事件監(jiān)聽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue?props傳入function時(shí)的this指向問題解讀
這篇文章主要介紹了Vue?props傳入function時(shí)的this指向問題解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了vue如何使用element組件自定義v-loading問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vue項(xiàng)目用到vue-lazyload做圖片懶加載，這篇文章主要介紹了vue-lazyload使用總結(jié)，解決這個(gè)插件的坑，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-11-11
Vue瀏覽器鏈接與接口參數(shù)實(shí)現(xiàn)加密過程詳解
這篇文章主要介紹了Vue瀏覽器鏈接與接口參數(shù)實(shí)現(xiàn)加密過程，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-12-12
vue created鉤子函數(shù)與mounted鉤子函數(shù)的用法區(qū)別
這篇文章主要介紹了vue created鉤子函數(shù)與mounted鉤子函數(shù)的用法區(qū)別，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了Vue3如何獲取來源路由問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了vue3繼承并擴(kuò)展三方組件完成二次封裝,文章使用naiveui的Input組件進(jìn)行舉例,elementPlus或者其他組件庫同理,并通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-03-03
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)圖書管理案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
Vue.js中使用components組件的實(shí)例講解
這篇文章主要介紹了Vue.js中使用components組件的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
打包壓縮成zip的東西,再解壓,很麻煩,本文主要介紹了vue中預(yù)覽zip的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下2023-09-09