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

我會很感激你們給我任何提示。

在此先感謝！

來源

2011-12-23 rockleegustavo

你需要的是這樣設置你的onmouseover：

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

在當前的代碼中，事件處理程序（設置爲container.onmouseover）設置爲dataRetrieving.getWidth(...)結果 - 這是什麼，因爲getWidth目前不返回任何東西。這也會導致警報立即出現，因爲函數正在立即執行。（爲了有效，那就要返回另一個功能。）

來源

2011-12-23 03:33:46 ziesemer

但是，如果沒有鼠標進入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");

你在那裏調用該函數，這就是爲什麼它提醒頁面加載。

來源

2011-12-23 03:34:54

javascript事件處理程序無法正常工作

回答

相關問題