仅当用户处于空闲状态 X 时间时才显示 DIV

Display DIV only if user has been Idle for X amount of time

本文关键字：时间 显示 DIV 状态 用户 于空闲      更新时间：2023-09-26

我想显示一个有用的 DIV，它基本上向用户展示如何在特定页面上完成某些事情，但前提是用户已经空闲了一段时间，比如 30 秒。

我所说的"空闲"的意思是：

不点击任何链接不右键单击任何地方

异常：我想从"用户空闲"规则中排除以下条件：

用户已向上或向下/向左或向右滚动用户在网站上的空白区域/或没有源/链接的元素上按下了鼠标按钮，例如，没有超链接的图像。和，按下键盘按钮

这能做到吗？或者我们只能检测到特定事件发生的时间？

任何想法/建议/资源将不胜感激。

谢谢

相当基本的...

var trigger = 30000
$.(function(){
    setInterval('displayInf()',trigger );
    $('body').bind('click dblclick keypress mousemove scroll', function(){
        clearDisplayInf();
    });
});
function displayInf()
{
    $('body').append('<div>Your notification div</div>');
}
function clearDisplayInf()
{
    trigger = clearInterval(trigger);
    trigger = setInterval('displayInf()', 30000 );
}

这应该可以解决问题 - 您可以添加一些脚本以使div 可移动并在删除后再次启动计时器，但这真的只是抛光......

DOM 中的事件会从叶子冒泡到根，因此在文档上添加一个事件侦听器是有意义的。

但是由于我们有可能停止在某些元素中为点击事件冒泡，因此在文档上注册点击事件可能无法完美工作，在这种情况下，注册mousedown mouseup事件会有所帮助：

var timer; // create a timer at first
// restart timer on click
function startIdle() {
    timer = setTimeout(function() { /* show div */ }, time);
}
if (document.addEventListener) {
    document.addEventListener('mouseup', startIdle, false);
}
else {
    document.attachEvent('onmouseup', startIdle);
}
// start the first timer
startIdle();
相关文章：