vue鼠标悬停事件监听实现方法_vue.js_

前言

开发框架为 vue2.x

情景描述

需求是这样的：页面在鼠标悬停（不动）n秒之后，页面进行相应的事件。

比如在我的需求下，是鼠标悬停15秒之后，页面上三个数据弹窗轮询展示。

解决方法

我的思路中 涉及到了三个变量

data(){ return { polling: null, timeCount: 0, judgeTimer: null, } } 

polling： 是 轮询的时候的一个计时器
timeCount： 是 判断鼠标是否移动的一个控制变量
judgeTimer：是 判断鼠标是否移动的一个计时器

只要鼠标进行了移动，那么 timeCount就会发生变化。
若是15秒内 timeCount没有发生变化，那么就说明此刻鼠标处于悬停状态，就可以进行运行悬停的事件

那么 对于鼠标移动 我们可以给元素绑定 mousemove事件

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

那么对于 timeCount 怎么知道是多久未发生变化呢？

我们可以在watch下对其进行监听

watch: { timeCount: { handler() { this.judgeTimer = null; this.polling = null; clearTimeout(this.judgeTimer); clearInterval(this.polling); this.judgeTimer = setTimeout(() => { this.play(); }, delay); }, }, }, 

至于我嘛的 play 函数 就是我们的具体业务部分了，在play函数内编写轮询的业务，使用 polling 作为计时器。

play() { clearInterval(this.polling); this.polling = setInterval(() => { // 具体业务代码 }, delay); }, 

总结

到此这篇关于vue鼠标悬停事件监听的文章就介绍到这了,更多相关vue鼠标悬停事件监听内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！