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

Vue 项目添加DOM事件:

[Ⅰ、Vue 项目触发的事件：](#Ⅰ、Vue 项目触发的事件：)

Ⅰ、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