鼠标悬停在整个页面而不是一个元素?

时间:2012-05-25 18:39:06

标签: javascript function prototype mouseover

我是网络编程的初学者,不幸的是我已经遇到了问题。我想使用原型的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。我在google和stackoverflow上进行了搜索,但找不到类似的问题。如果我错了,请纠正我。

1 个答案:

答案 0 :(得分:4)

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);
    }
};