vue鼠标悬停事件监听实现方法
更新时间：2022年09月23日 14:52:48 作者：chenyu-max
页面在鼠标悬停(不动)n秒之后,页面进行相应的事件,下面这篇文章主要给大家介绍了关于vue鼠标悬停事件监听的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
前言
开发框架为 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鼠标悬停事件监听内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue-router中hash模式与history模式的区别
为了构建 SPA（单页面应用）,需要引入前端路由系统,这就是 Vue-Router 存在的意义,而这篇文章主要给大家介绍了关于vue-router中两种模式区别的相关资料，分别是hash模式、history模式,需要的朋友可以参考下2021-06-06
这篇文章主要介绍了vue 项目全屏插件screenfull使用案例,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-12-12
这篇文章主要给大家介绍了关于vue中组件的3种使用方式，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-03-03
这篇文章主要介绍了vue中require与import的区别详解,require相当于module.exports的传送门,module.exports后面的内容是什么,require的结果就是什么,对象、数字、字符串、函数,再把require的结果赋值给某个变量,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了如何利用vue3定制复杂组件的滚动条，文中通过示例代码讲解详细，需要的朋友们下面就跟随小编来一起学习学习吧2023-04-04
ant design vue 清空upload组件图片缓存的问题
这篇文章主要介绍了ant design vue 清空upload组件图片缓存的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要为大家详细介绍了Vue.js组件tab实现选项卡切换的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
我们在开发中经常会遇到通过点击某个按钮或者文字实现图片的预览功能,这里我们分别介绍vue2和vue3里面如何实现图片预览方法,需要的朋友可以参考下2023-09-09
vue+springboot实现图形验证码Kaptcha的示例
图形验证码是做网站常用的功能,本文主要介绍了vue+springboot实现图形验证码Kaptcha的示例,具有一定的参考价值,感兴趣的可以了解一下2023-11-11
vue-electron使用serialport时问题解决方案
这篇文章主要介绍了vue-electron使用serialport时问题解决方案,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
最新评论