鼠標懸停在整個頁面上而不是一個元素上工作？

Question

我是網絡編程的初學者，不幸的是我已經有一個問題。我想使用原型的mouseover（mouseout）函數添加或刪除一個類，但出於某種原因，警報（用於調試）在頁面的第一次加載時顯示。我知道這一定是荒謬的要求，但我看不出問題所在。我希望只有當我用類「菜單」瀏覽對象時纔會發出警報。

這是我的代碼：

window.onload = function(){ 
    var menuitems = $$('.menu'); 
    for(var i = 0;i < menuitems.length;i++){ 
     menuitems[i].observe("mouseover",alert("over")); 
     menuitems[i].observe("mouseout",alert("out")); 
    } 
} 

PS。我做了谷歌和stackoverflow的搜索，但無法找到類似的問題。如我錯了請糾正我。

Answer 1

的第二個參數爲observe方法應該是功能 - 通過實際調用alert()那裏，你只是提出警告時，該事件處理程序定義（即在頁面加載時），而不是當它被觸發。

試試這個：

window.onload = function() { 
    var menuitems = $$('.menu'); 
    for(var i = 0; i < menuitems.length; i++) { 
     menuitems[i].observe("mouseover", function() { 
      alert("over"); 
     }); 
     menuitems[i].observe("mouseout", function() { 
      alert("out"); 
     }); 
    } 
}; 

在那裏，我已經定義事件處理函數內聯，但沒有叫他們。當mouseover/mouseout事件被觸發時，它們將被調用。或者，您可以提前定義功能：

window.onload = function() { 
    var handleMouseover = function() { 
     alert("over"); 
    }; 
    var handleMouseover = function() { 
     alert("out"); 
    }; 

    var menuitems = $$('.menu'); 
    for(var i = 0; i < menuitems.length; i++) { 
     menuitems[i].observe("mouseover", handleMouseover); 
     menuitems[i].observe("mouseout", handleMouseout); 
    } 
};