Mousemove 事件处理文档但不处理“正文" [英] Mousemove event working on document but not 'body'

问题描述

我试图让一个 div 看起来像一个关闭的灯，当鼠标移动时，灯会打开.

I am trying to make a div look like a turned-off light and when the mouse moves, the light turns on.

我完成了鼠标移动打开灯的部分.看看这个小提琴.

I am done with the part where the mouse movement turns the light on. Look at this fiddle.

jQuery 代码:

$(document).mousemove(function() {
    $('div').addClass('glow');
});

我有两个问题

1. 如果我把正文"而不是文档，它不起作用，为什么?

1. If I put 'body' instead of document, it doesn't work, why?

如何检测鼠标停止?

推荐答案

1) 'body' 完美运行，但您必须将鼠标移到 body 上，直到底部窗户(是的，身体是一个奇怪的，有时甚至是不连贯的东西).

1) 'body' perfectly works but you must move the mouse over the body, which doesn't go until the bottom of the window (yes, the body is a strange and sometimes incoherent thing).

2) 要检测鼠标停止，最简单的解决方案是使用 setTimeout 并定义延迟:

2) To detect mouse stop, the simplest solution is to use setTimeout and define a delay :

(function (){
    var i =0;
    var timer;
    $('body').mousemove(function() {
        clearTimeout(timer);
        // 'body' doesn't work instead of document
        i += 1;
        $('p').text(function() {
            return 'Moved: ' + i;
        });
        $('div').addClass('glow');
        timer = setTimeout(function(){$('div').removeClass('glow')}, 2000);
    });     
})();

演示

这篇关于Mousemove 事件处理文档但不处理“正文"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！