Question

我想显示一个有用的DIV，它基本上向用户显示如何在特定页面上完成某些操作，但仅如果用户已经闲置了一段时间，比如30秒。

“Idle”的意思是：

不点击任何链接没有点击任何地方

例外：我想从Is User Idle规则中排除以下条件：

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

可以这样做吗？或者我们只能在发生特定事件时检测？

非常感谢任何想法/建议/资源。

谢谢

Answer 1

相当基本......

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可移动并在删除后再次启动计时器但是真的只是抛光了..

Answer 2

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();

仅当用户空闲X时间时才显示DIV

2 个答案: