时间戳

首页 > 解决方案 > 刷新网页后停用鼠标移动事件不起作用

jquery - 刷新网页后停用鼠标移动事件不起作用

问题描述

我正在使用 jQuerymousemove事件来跟踪鼠标活动。

出于测试目的，我startActivityTracker()在开发者控制台中调用。当鼠标移动时，onActivity()被调用。然后我运行stopActivityTracker()并且onActivity()不再被调用。到目前为止，这一切都有效。

F5但是当调用后刷新网站（例如）时startActivityTracker()，stopActivityTracker()没有效果。换句话说，onActivity()仍然是被调用的。刷新页面时是否有任何参考丢失？

function onActivity() {
    console.log('onActivity: ' + Math.random()) ;    
}

function startActivityTracker() {
    $(document).ready(function () {
        console.log('Tracker started.');
        $(document).mousemove(onActivity);        
    });
}

function stopActivityTracker() {
    console.log('Tracker stopped.');
    $(document).off('mousemove', onActivity);
}

标签： jqueryjquery-events

解决方案

在您的startActivityTracker函数中，您运行：

$(document).ready(function () {

根据文档：

.ready() 方法提供了一种在页面的文档对象模型 (DOM) 变得可以安全操作时立即运行 JavaScript 代码的方法。

相反，在stopActivityTracker中，您无需等待 ready 事件，因此在附加 mousemove 事件之前执行.off()方法：

$(document).mousemove(onActivity)

为了解决这个问题，您需要将stopActivityTracker更改为：

function stopActivityTracker() {
    $(document).ready(function () {
         console.log('Tracker stopped.');
         $(document).off('mousemove', onActivity);
    });
}

它可以在开发者控制台中运行，因为 dom 已经准备好了。

完整代码：

function onActivity() {
    console.log('onActivity: ' + Math.random());
}

function startActivityTracker() {
    $(document).ready(function () {
        console.log('Tracker started.');
        $(document).mousemove(onActivity);
    });
}

function stopActivityTracker() {
    $(document).ready(function () {
        console.log('Tracker stopped.');
        $(document).off('mousemove', onActivity);
    });
}


$( document ).ready(function () {
    startActivityTracker();
    stopActivityTracker();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

无论如何，我建议您从函数中删除就绪事件处理程序，并在全局就绪事件处理程序中调用它们：

function onActivity() {
    console.log('onActivity: ' + Math.random());
}

function startActivityTracker() {
    console.log('Tracker started.');
    $(document).mousemove(onActivity);
}

function stopActivityTracker() {
    console.log('Tracker stopped.');
    $(document).off('mousemove', onActivity);
}


$( document ).ready(function () {
    startActivityTracker();
    stopActivityTracker();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

为了获得stopActivityTracker在startActivityTracker之前运行的证据，在第一次调用后停止onActivity函数就足够了：

var onlyFirstTime = true;

function onActivity(e) {
    if (onlyFirstTime) {
        onlyFirstTime = false;
        console.log('onActivity: ' + Math.random()) ;
    }
}

function startActivityTracker() {
    $(document).ready(function () {
        console.log('Tracker started.');
        $(document).mousemove(onActivity);
    });
}

function stopActivityTracker() {
    console.log('Tracker stopped.');
    $(document).off('mousemove', onActivity);
}
startActivityTracker();
stopActivityTracker();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

推荐阅读