鼠标悬停在整个页面上工作，而不是一个元素

Mouseover working on whole page instead of one element?

本文关键字：一个 元素 工作 悬停 鼠标      更新时间：2023-09-26

我是网络编程的初学者，不幸的是我已经遇到了问题。我想使用原型的鼠标悬停（鼠标退出）功能来添加或删除类，但由于某种原因，警报（用于调试）在页面的第一次加载时显示。我知道这一定是荒谬的，但我看不出问题所在。我希望只有当我使用类"菜单"检查对象时才会发出警报。

这是我的代码：

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

附言。我在谷歌和stackoverflow上搜索了一下，但找不到类似的问题。如果我错了，请纠正我。

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

在那里，我已经内联定义了事件处理程序函数，但尚未调用它们。触发鼠标悬停/鼠标退出事件时将调用它们。或者，您可以提前定义函数：

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);
    }
};
相关文章：