解决:给整个 Vue 项目添加鼠标点击、鼠标移动、鼠标滚轮(DOM)事件,以达到后台延迟退出

Vue 项目添加DOM事件:

Ⅰ、Vue 项目触发的事件:

1、鼠标点击事件、鼠标移动事件、鼠标滚轮事件:

javascript 复制代码
<script setup>
    window.onload = function(){
        document.onmouseup = function(event){
            event = event || window.event;
            alert("鼠标正在点击");
        }
        // document.onmousemove = function(event){
        //     event = event || window.event;
        //     alert("鼠标正在移动");
        // }
        let mouseMoveTimer;
        document.addEventListener('mousemove', function() {
            clearTimeout(mouseMoveTimer); // 清除之前的定时器,如果存在的话
            mouseMoveTimer = setTimeout(function() {
                alert('鼠标最后的移动');
                // 这里可以执行鼠标移动结束后的操作
            }, 1000); // 这里的100毫秒可以根据需要调整,以适应不同的场景
        });
        document.onmousewheel = function(event){
            event = event || window.event;
            alert("鼠标滚轮正在滑动");
        }

    }
</script>

2、上述代码中鼠标移动解决的问题:

// 添加定时操作是为了解决:鼠标只要滑动就会触发该弹窗的问题;

// 目标是:值获取最后一次的移动,然后下发请求,让后台知道前端有鼠标移动的触发操作;

// 注意:定时器的时间设置,此时设置的是 1000 ms,达到了预想的效果,10000 ms 也能达到预想的效果,但是若是 100 ms 就不行,一直出现弹窗,因此若有类似需求就具体事情具体分析;

javascript 复制代码
let mouseMoveTimer;
document.addEventListener('mousemove', function() {
    clearTimeout(mouseMoveTimer); // 清除之前的定时器,如果存在的话
    mouseMoveTimer = setTimeout(function() {
        alert('鼠标最后的移动');
        // 这里可以执行鼠标移动结束后的操作
    }, 1000); // 这里的100毫秒可以根据需要调整,以适应不同的场景
});

3、截图:

Ⅱ、小结:

其一、哪里有不对或不合适的地方,还请大佬们多多指点和交流!
其二、若有转发或引用本文章内容,请注明本博客地址(直接点击下面 url 跳转) https://blog.csdn.net/weixin_43405300,创作不易,且行且珍惜!
其三、有兴趣的话,可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)(直接点击下面 url 跳转):https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482
其四、再有兴趣的话,也可以多多关注这个专栏(Java)(直接点击下面 url 跳转):https://blog.csdn.net/weixin_43405300/category_12654744.html?spm=1001.2014.3001.5482

相关推荐
chxii27 分钟前
ISO 8601日期时间标准及其在JavaScript、SQLite与MySQL中的应用解析
开发语言·javascript·数据库
没逛够39 分钟前
Vue 自适应高度表格
javascript·vue.js·elementui
苹果醋33 小时前
JAVA面试汇总(二)多线程(五)
运维·vue.js·spring boot·nginx·课程设计
咖啡の猫3 小时前
Vue初始化脚手架
前端·javascript·vue.js
一 乐3 小时前
汽车销售|汽车推荐|基于SprinBoot+vue的新能源汽车个性化推荐系统(源码+数据库+文档)
java·数据库·vue.js·汽车·毕设·汽车个性化推荐
晨枫阳3 小时前
uniapp兼容问题处理总结
前端·vue.js·uni-app
拉不动的猪4 小时前
如何处理管理系统中(Vue PC + uni-app 移动端):业务逻辑复用基本方案
前端·javascript·架构
边洛洛4 小时前
next.js项目部署流程
开发语言·前端·javascript
非凡ghost5 小时前
Syncovery Premium(文件同步软件)
前端·javascript·后端
神膘护体小月半5 小时前
bug 记录 - 路由守卫 beforeRouteLeave 与 confirm 结合,不生效问题
javascript·vue