对象文字 + document.body.onclick 没有做我期望的事情答案

【问题标题】：Object literal + document.body.onclick not doing what I expect对象文字 + document.body.onclick 没有做我期望的事情
【发布时间】：2009-01-18 00:41:02
【问题描述】：

好的，这里的人是我惊人的反重力图书馆。我试图将它定义为一个对象文字，呃，我读到所有酷孩子正在做的事情是为了封装他们的库。基本测试表明它工作正常，但我似乎无法从我的对象内部看到 document.body。

应该发生的是，当我单击“它正在工作”页面时应该发出警报。相反，我得到一个 document.body=null 错误。是什么赋予了？我的身体在哪里？为什么我不能为它设置鼠标事件？我浪费了我整个星期五的时间！呸！

antigrav={
activate:function(){
    // turn on antigrav
    document.body.onmousedown = antigrav.startPan();
},

startPan:function(event){
    alert('it is working!');
},

}

document.onload=antigrav.activate();

【问题讨论】：

酷孩子们也在添加事件监听器。 ;) 见：quirksmode.org/js/events_advanced.html
所以，我听说过一些很酷的孩子这样做的传言，但它有什么比仅仅为元素事件分配函数更好的呢？ myel.onclick=foo;似乎比 myel.addEventListener('onclick',foo,false) 容易多了，对吧？

标签： javascript object-literal

【解决方案1】：

你可能想这样做

document.onload=antigrav.activate;

使用括号，您将document.onload 设置为运行antigrav.activate() 的结果，而不是表明您希望antigrav.activate 作为document.onload 处理程序运行。因此，在加载文档之前，为了进行分配，activate() 正在运行，因此 document.body 尚未定义。

您可能希望对 onmousedown 处理程序分配做同样的事情：

document.body.onmousedown = antigrav.startPan;

尝试一下，我也不得不切换到 window.onload...

另外，请注意对象字面量定义中的尾随逗号。 Firefox 对它们没问题，但 IE 会窒息。所以，总的来说：

var antigrav={
    activate:function(){
        // turn on antigrav
        document.body.onmousedown = antigrav.startPan;
    },
    startPan:function(event){
        alert('it is working!');
    }
};
window.onload=antigrav.activate;

【讨论】：

这一切看起来都是合理且有希望的，但现在脚本什么也没做。 :(
这些都是很好的修复，但我会完全取消 document.onload，只需在文档底部添加一个名为“antigrav.activate();”的脚本标签。无需等待 onload，只要 dom 完成，您就可以安全地触发您的脚本。

【解决方案2】：

好的，这是当前状态：

var antigrav={
activate:function(){
    // turn on antigrav
    alert('started');
    document.body.onmouseup = antigrav.startPan;
    // make flash shield
},

startPan:function(event){
    alert('dude, you are panning!');
},


}
antigrav.activate();
//document.onload=window.antigrav.startPan;

它达到“alert('started')，但仍然抛出“error:document.body is null” 注释掉的行具有相同的结果...

【讨论】：

使用 window.onload 似乎工作...查看上面的最新编辑

【解决方案3】：

好吧，伙计们，我是个傻瓜，但无论如何你们都非常乐于助人。

/real/ 的问题，和任何东西都没有关系，并且揭示了 body.onclick 行为的一个奇怪的怪癖：

在我的 /HTML/ 中，我尝试设置一个大文档来测试我的点击次数：

<html>
<script src="antigrav.js"></script>
<body onload='test()'>
<!--<body onload="antigrav.activate();"  >-->

    yo, fool, this is the body!

    <div style="position:absolute; top:2000px;  left:2000px;">
        it is mad wide and tall!
    </div>

</body>
</html>

为了拉伸身体，我在 2000px、2000px 处放置了一个 div。滚动条在那里，身体一定很大，对吧？实际上，div 之间的所有空间都 / 根本没有 / 在其中 - 包括一个 body 元素，我猜？您必须单击实际文本才能触发 document.body.onclick...

奇怪的是，如果你给 body 标签一个 onclick="foo()"，那么当你点击页面上的任何地方，包括不存在的 body 区域时，就会触发 foo() .我不知道为什么会这样，但这实际上是问题所在。感谢您的帮助，您还指出了其他一些好的技巧。

【讨论】：