前言
開發(fā)框架為 vue2.x
情景描述
需求是這樣的：頁面在鼠標懸停（不動）n秒之后，頁面進行相應的事件。
比如在我的需求下，是鼠標懸停15秒之后，頁面上三個數據彈窗輪詢展示。
解決方法
我的思路中 涉及到了三個變量
data(){
return {
polling: null,
timeCount: 0,
judgeTimer: null,
}
}
polling： 是 輪詢的時候的一個計時器
timeCount： 是 判斷鼠標是否移動的一個控制變量
judgeTimer：是 判斷鼠標是否移動的一個計時器
只要鼠標進行了移動，那么 timeCount就會發(fā)生變化。
若是15秒內 timeCount沒有發(fā)生變化，那么就說明此刻鼠標處于懸停狀態(tài)，就可以進行運行懸停的事件
那么 對于鼠標移動 我們可以給元素綁定 mousemove事件
mouseMove() {
clearTimeout(this.judgeTimer);
clearInterval(this.polling);
this.timer = null;
this.polling = null;
this.timeCount = ++this.timeCount % 100;
},
那么對于 timeCount 怎么知道是多久未發(fā)生變化呢？
我們可以在watch下對其進行監(jiān)聽文章來源：http://www.zghlxwxcb.cn/news/detail-411073.html
watch: {
timeCount: {
handler() {
this.judgeTimer = null;
this.polling = null;
clearTimeout(this.judgeTimer);
clearInterval(this.polling);
this.judgeTimer = setTimeout(() => {
this.play();
}, delay);
},
},
},
至于我嘛的 play 函數 就是我們的具體業(yè)務部分了，在play函數內編寫輪詢的業(yè)務，使用 polling 作為計時器。文章來源地址http://www.zghlxwxcb.cn/news/detail-411073.html
play() {
clearInterval(this.polling);
this.polling = setInterval(() => {
// 具體業(yè)務代碼
}, delay);
},
到了這里，關于vue鼠標懸停事件監(jiān)聽的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
