javascript事件处理程序无法正常工作

问题描述：

我有一些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

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

在此先感谢！

答

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

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

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

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

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

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

答

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

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

javascript事件处理程序无法正常工作

相关推荐