为什么 div 和 body 没有触发鼠标移动事件？

Question

我正在注册 mousemove 处理程序，代码如下:

http://jsfiddle.net/cbsub/2/ 在Chrome和Firefox上测试过。

其中一部分代码为：

$("body").on("mousemove", function () {
    console.log("$('body') mousemove listener invoked");
});

$("#foo").on("mousemove", function () {
    console.log("$('#foo') mousemove listener invoked");
});

但出于某些原因，它们从未被调用，但是 mousemove 的 html、document 和 window 处理程序将被调用。我是否忽略了什么？

- Jeremy L

Answer 1

这是因为您将脚本包裹在head和语句中。

document.getElementsByTagName("body")[0]

返回undefined并使您的脚本中断，因此在此之后不会执行任何事件处理程序附加代码。

将它们包裹在window.onload或document ready中，它将正常工作。

演示

由于脚本被包装在head中，而在执行时文档尚未加载，因此它将无法找到要绑定处理程序的元素。如果未找到元素，jquery不会返回undefined，因此它不会中断脚本，而native js元素的document函数如果未找到元素则返回undefined。唯一不需要在document.ready中或在DOM中元素之后出现的是document，即使在文档准备就绪之前也可以使用。

$(function () { //document.ready
    $(window).on("mousemove", function () {
        console.log("window mousemove listener invoked");
    });

    $(document).on("mousemove", function () {
        console.log("document mousemove listener invoked");
    });

    $(document.documentElement).on("mousemove", function () {
        console.log("document.documentElement mousemove listener invoked");
    });

    $(document.body).on("mousemove", function () {
        console.log("document.body mousemove listener invoked");
    });

    $("body").on("mousemove", function () {
        console.log("$('body') mousemove listener invoked");
    });

    $("#foo").on("mousemove", function () {
        console.log("$('#foo') mousemove listener invoked");
    });

    $("#foo").mousemove(function () {
        console.log("$('#foo') mousemove listener invoked");
    });

    document.getElementsByTagName("body")[0].onmousemove = function () {
        console.log("DOM level 0 body mousemove listener invoked");
    };

    document.getElementById("foo").onmousemove = function () {
        console.log("DOM level 0 foo mousemove listener invoked");
    };
});

- PSL

---

嗯...很好的解释。唯一的小问题是我在Chrome的开发者工具中没有看到报告错误，说undefined没有onmousemove属性。如果在页面加载后，我有意输入document.getElementsByTagName("foobarwahlah")[0].onmousemove = function () {}，那么它会说TypeError: Cannot set property 'onmousemove' of undefined。 - Jeremy L

我看到了 Uncaught TypeError: Cannot set property 'onmousemove' of undefined。然而，你的问题可能是时机不对。如果你把它们放在 ready 下面或者 html 元素之后（body 的末尾），那么它应该可以正常工作。 - PSL

@JeremyL，就像我说的那样，这是一个关于脚本位置的时间问题。如果document.getElementsByTagName("body")[0]被包含在head中而不是在window.onload或document.ready中，也会抛出错误，这是理论上的情况，实际上我大多数时候都是这样看到的。 - PSL

Answer 2

小提琴正常工作。但是请始终将您的JS代码放在document.onready函数内部。

$(function(){
< your Js code here >
});

这是因为浏览器在渲染元素之前先读取代码，所以在读取时无法绑定任何不存在的内容。因此，你的代码可能无法正常工作。

- hsemarap

---

即使在代码编辑器中，也只有窗口和文档绑定是有效的。 - hsemarap

Answer 3

通过将您的console.log语句更改为alert()，窗口会变得疯狂，它们都在工作。这不是您的问题。

- Adrian Trainor