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

Question

我对 javascript 事件处理程序有一些问题，我真的很想知道我做错了什么。事情是这样的，我想提醒悬停的 div 的宽度，但是一旦加载页面，就会出现警报。

这是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

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

提前致谢！

Answer 1

您需要使用以下onmouseover内容设置您的：

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

在您当前的代码中，事件处理程序（设置为container.onmouseover）设置为dataRetrieving.getWidth(...)- 的结果，因为getWidth当前不返回任何内容。这也导致警报立即出现，因为该函数正在立即执行。（为了有效，它必须返回另一个函数。）

Answer 2

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

您在那里调用该函数，这就是它在页面加载时发出警报的原因。