Question

我无法弄清楚为什么这段代码无效：

<!DOCTYPE html>
<html><head></head><body onload="
document.body.addEventListener('mousedown',function(e){
alert(123);
},false);
"></body></html>

甚至没有任何错误......它什么也没做。

令人惊讶的是，如果我将'mousedown'更改为'keydown'则可行

   <!DOCTYPE html>
    <html><head></head><body onload="
    document.body.addEventListener('keydown',function(e){
    alert(123);
    },false);
    "></body></html>

（我正在使用chrome btw）

Answer 1

It works fine（see the code）。

请注意，我添加了一些内容并为body添加了边框，以便您可以查看其尺寸。 If you remove the content，你看到的一切都是黑线。如果没有内容（如任何其他块元素）意味着您无法在其中单击，则body不会占用任何空间。

您似乎认为body会在整个浏览器窗口中传播，但事实并非如此。

如果您将处理程序附加到window，它将获取在可见区域内发生的所有事件。

Answer 2

附加到body元素的侦听器中 this 的值在不同浏览器中的行为略有不同。在Firefox和旧版本的IE中尝试以下操作（注意它是专门针对这种情况，它不是一般的“这是什么？”功能）：

<head>
<title>Some "this" tests</title>

<script type="text/javascript">

var whatIs = (function(global) {
  return function(that) {

    // If String(that) isn't useful, try some stuff
    if (String(that) == '[object]') {
      if (that == global || that == window) {
        alert('window');
      } else if (typeof that.tagName == 'string') {
        alert(that.tagName);
      } else {
        alert(that);
      }

    // Otherwise show that
    } else {
      alert(that);
    }
  }
})(this);

</script>
</head>
<body onclick="whatIs(this);"  onload="whatIs(this);">
  <div onmousedown="whatIs(this)">this</div>
</body>

在所有浏览器中，onload显示窗口并单击div显示 this 作为div。单击正文将在Firefox中显示此窗口，但在IE，Opera和Chrome中显示 body 元素。

Answer 3

另一种方法是使用jQuery绑定。它不仅可以减少代码，而且大多数浏览器也支持它。试试这个：

$('body').bind('click mousedown', function() {
  alert(123);
});

Answer 4

尝试使用全局窗口对象：

<!DOCTYPE html>
<html><head></head><body onload="
window.addEventListener('click',function(e){
alert(123);
},false);
"></body></html>

对于给定的HTML，正文没有高度和宽度，因此当您单击窗口时它不会收到任何鼠标事件。它仍然可以接收关键事件。如果给它一个高度和宽度，它将起作用。

<!DOCTYPE html>
<html><head></head><body style="height:1000px; width:1000px" onload="
document.body.addEventListener('mousedown',function(e){
alert(123);
},false);
"></body></html>

将听众附加到身体不起作用？

4 个答案: