刷新网页后无法激活鼠标移动事件

问题描述

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

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

但是在调用startActivityTracker()后刷新网站（例如 F5 ）时，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);
}

解决方法

尝试更改功能

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

在您的 startActivityTracker 函数中运行：

$(document).ready(function () {

根据documentation：

.ready（）方法提供了一种方法，以便在页面的文档对象模型（DOM）变得可以安全操作。

相反，在 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>

https://jsfiddle.net/pxhs9qer/

JS：

(function($) {
    $(document).ready(function() {
        function onActivity() {
            $('#log').text('onActivity: ' + Math.random());
        }
        function startActivityTracker() {
            $('#status').text('on');
            $(document).on('mousemove',onActivity);
        }
        function stopActivityTracker() {
            $('#status').text('off');
            $(document).off('mousemove',onActivity);
        }
        $('#btn').on('change',function() {
            if (this.checked) {
                startActivityTracker();
            } else {
                stopActivityTracker();
            }
        });
    });
})(jQuery);

将整个脚本包装在$（document）.ready（）中，并使用 on 和 off

jquery jquery-events