2011-12-23 26 views
2

我有一些JavaScript事件处理程序的问题,我真的很想知道我在做什么错误。 这是事情,我想提醒悬停div的宽度,但一旦页面加载,警报出现。javascript事件处理程序无法正常工作

这里的HTML:

<div id="mainContainer"> 
    <div id="container_1" style="width:200px"></div> 
    <div id="container_2" style="width:100px"></div> 
    <div id="container_3" style="width:300px"></div> 
    <div id="container_4" style="width:150px"></div> 
</div> 

和这里的JS:

dataRetrieving = { 
    getWidth:function(id){ 
     var box = document.getElementById(id); 
     var tempResult = box.style.width; 
     return tempResult; 
    } 
} 
var container = document.getElementById("container_1"); 
container.onmouseover = function(){ 
    alert(dataRetrieving.getWidth("container_1")); 
}; 

已经回答了,谢谢:d

我会很感激你们给我任何提示。

在此先感谢!

回答

2

你需要的是这样设置你的onmouseover

container.onmouseover = function(){ 
    dataRetrieving.getWidth("container_1"); 
}; 

在当前的代码中,事件处理程序(设置为container.onmouseover)设置为dataRetrieving.getWidth(...)结果 - 这是什么,因为getWidth目前不返回任何东西。这也会导致警报立即出现,因为函数正在立即执行。 (为了有效,那就要返回另一个功能。)

+0

但是,如果没有鼠标进入div触发事件?我改变了代码,所以'getWidth'可以返回'tempResult'并且只在'container.mouseover'事件处理器之后提醒结果,但问题仍然存在。 PS:哦,你的解决方案确实有用,我只想学习更多一点:D谢谢 – rockleegustavo 2011-12-23 03:53:33

+0

它与鼠标移动无关。在您发布的原始代码中,'getWidth'函数作为'container.onmouseover = ...'行的一部分立即执行,这会导致调用'alert'。现在,它仍然立即调用alert。 (你简化了它,所以它应该更容易看出现在发生了什么以及它为什么发生。)如果你进行上面我建议的编辑,你应该看到你期望的结果。 – ziesemer 2011-12-23 03:59:15

+0

我改变了代码,就像你想要的,它很好。我只想知道为什么'container.onmouseover = alert(dataRetrieving.getWidth(“container_1”))'不起作用:/ – rockleegustavo 2011-12-23 04:14:02

1
container.onmouseover = dataRetrieving.getWidth("container_1"); 

你在那里调用该函数,这就是为什么它提醒页面加载。