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

时间:2011-06-05 22:50:56

标签: javascript events javascript-events mouseevent

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

<!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)

4 个答案:

答案 0 :(得分:3)

It works finesee the code)。

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

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

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

答案 1 :(得分: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 元素。

答案 2 :(得分:1)

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

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

答案 3 :(得分:0)

尝试使用全局窗口对象:

<!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>