与 onmouseover 和 onmouseout 斗争答案

【问题标题】：Struggling with onmouseover and onmouseout与 onmouseover 和 onmouseout 斗争
【发布时间】：2012-12-12 13:21:50
【问题描述】：

我正在努力解决 onmouseover 和 onmouseout。

我去过的每个网站几乎都准确地显示了这种语法。我实际上是从 Mozilla 复制粘贴的。我遇到的问题是它立即调用 largeDiv 和 smallDiv 函数。（最终，我希望在鼠标悬停事件期间将新类应用于 div，并在鼠标悬停时返回旧类。）我很确定我的鼠标事件是罪魁祸首。我也想知道我的 onload 函数是否引起了任何问题，但是当我将其注释掉时，唯一改变的是小 div 没有按预期加载。

我尝试使用事件侦听器，以为我没有正确调用事件，但这根本不起作用，尽管我不确定我是否正确编码，并且没有花费超过一个小时该死的东西！我已经尝试了许多调整，camelcasing onmouseover，使用括号等......无论如何，这是代码：

var introEl = document.getElementById("intro");

//display large div by default and 
//use small div with js enabled
window.onload = function(){
    introEl.className = "small";
}

    function largeDiv(){
    console.log("It Worked");
};

    function smallDiv(){
    console.log("Mouse Out!");
};

introEl.onmouseover = largeDiv();
introEl.onmouseout = smallDiv();

我在浏览器中对此进行了编码，当我将其复制到 jsFiddle 以提出这个问题时，它不会在加载时加载小 div，但它确实记录了语句。我把它放在CodePen 上，它就像我描述的那样工作。不知道是什么原因造成的，但这是第二次发生这种情况。

顺便说一句，如果你去 CodePen 或 jsFiddle，我知道我的设计能力欠缺。我这样做只是为了一个游乐场，以及一个保存有效代码的地方，比如笔记本。我向你保证，情况会变得更糟。

一如既往，感谢您的帮助。

【问题讨论】：

这个问题似乎是特定于浏览器的吗？您在哪些浏览器中对此进行了测试？
我从没想过尝试不同的浏览器，但它在 firefox、IE9、Chrome 和 Safari 上的工作方式如前所述。我还没有下载 Opera。
所以在您上面列出的所有浏览器中，它都会立即触发这两个功能，对吗？
我以前听说过这种情况，但我还没有找到原因，我会继续寻找，如果你碰巧找到了答案，请告诉我。
小伙伴们，他在为 onmouseover 和 onmouseout 事件分配函数时遇到了语法错误！ :)

标签： javascript onmouseover onmouseout

【解决方案1】：

var introEl = document.getElementById("intro");

//display large div by default and 
//use small div with js enabled
window.onload = function(){
    introEl.className = "small";
}

    function largeDiv(){
    console.log("It Worked");
};

    function smallDiv(){
    console.log("Mouse Out!");
};

introEl.onmouseover = largeDiv; // here you don't need "()" with your defined functions
introEl.onmouseout = smallDiv; // here you don't need "()" with your defined functions

【讨论】：

是的！接受它似乎非常敏感。如果我移动鼠标太快，它会触发几次。不只是我的鼠标，触摸板也发生了同样的情况。但至少它等着我鼠标悬停！非常感谢。

【解决方案2】：

请转到以下小提琴，我做了一些小改动，对我来说效果很好

fiddle

你也可以使用

<div id="intro" onmouseover="largeDiv();" onmouseout="smallDiv();">
    Mouse over this text
</div>

在此处查看工作示例fiddle 2

【讨论】：