vue鼠標(biāo)懸停事件監(jiān)聽實(shí)現(xiàn)方法

更新時(shí)間：2022年09月23日 14:52:48 作者：chenyu-max

頁面在鼠標(biāo)懸停(不動(dòng))n秒之后,頁面進(jìn)行相應(yīng)的事件,下面這篇文章主要給大家介紹了關(guān)于vue鼠標(biāo)懸停事件監(jiān)聽的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

開發(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)行懸停的事件

那么對于鼠標(biāo)移動(dòng) 我們可以給元素綁定 mousemove事件

mouseMove() {
  clearTimeout(this.judgeTimer);
  clearInterval(this.polling);
  this.timer = null;
  this.polling = null;
  this.timeCount = ++this.timeCount % 100;
},

那么對于 timeCount 怎么知道是多久未發(fā)生變化呢？

我們可以在watch下對其進(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue-router中hash模式與history模式的區(qū)別
為了構(gòu)建 SPA（單頁面應(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使用案例,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2023-12-12
vue中組件的3種使用方式詳解
這篇文章主要給大家介紹了關(guān)于vue中組件的3種使用方式，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
vue中require與import的區(qū)別詳解
這篇文章主要介紹了vue中require與import的區(qū)別詳解,require相當(dāng)于module.exports的傳送門,module.exports后面的內(nèi)容是什么,require的結(jié)果就是什么,對象、數(shù)字、字符串、函數(shù),再把require的結(jié)果賦值給某個(gè)變量,需要的朋友可以參考下
2023-10-10
基于Vue3定制復(fù)雜組件滾動(dòng)條的實(shí)現(xiàn)
這篇文章主要介紹了如何利用vue3定制復(fù)雜組件的滾動(dòng)條，文中通過示例代碼講解詳細(xì)，需要的朋友們下面就跟隨小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
ant design vue 清空upload組件圖片緩存的問題
這篇文章主要介紹了ant design vue 清空upload組件圖片緩存的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(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通過elementUI組件實(shí)現(xiàn)圖片預(yù)覽效果
我們在開發(fā)中經(jīng)常會(huì)遇到通過點(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í)問題解決方案
這篇文章主要介紹了vue-electron使用serialport時(shí)問題解決方案,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
2021-09-09