2

我正在用 JavaScript 做一些实验，我有一个水平显示的 4 个项目的列表，每个列表项都分配了一个onmouseover和onmouseout事件。

每个项目的onmouseover事件执行一个函数，该函数使用间隔随着时间的推移增加项目的高度。

每个项目的outmouseover事件执行一个函数，然后使用另一个间隔随着时间的推移将项目的高度降低到其默认值。

它在以下情况下工作：当我触发onmouseover列表项时，高度按预期增加，当我将鼠标从列表项上移开时，高度然后按预期减小。

但是，问题是，它似乎在以下情况下不起作用：当我onmouseover为列表项触发时，高度会按预期增加，但是如果我onmouseover在另一个列表项返回到其原始大小之前触发另一个事件，onmouseout上一个列表项的函数没有完成执行。

对不起，如果我缺少任何细节，显然我在解释事情方面非常糟糕......所以我有一个指向源代码的链接和一个你可以测试代码以查看发生了什么的网站。

也许我对 javascript 的了解没有我想象的那么多，所以虽然解决方案或修复会很棒，但我也很乐意接受任何关于为什么会发生这种情况的建议或某种解释。

我最初认为多个间隔计时器不能同时执行，直到经过一些研究我发现它们可以。所以现在我在想这是否是onmouseover和onmouseout事件之间的冲突。

任何建议、指导或解决方案将不胜感激！


来源： https
://docs.google.com/open?id=0B6XLOOGyKVdWVkpSUklmMVI5QUk 测试站点： http
://www.play-hookey.com/htmltest/ （只需复制该google文档的内容并粘贴到html文本区域在网站上看看我在说什么）

4

1 回答 1

3

你的代码：

icon.onmouseover = function(){ enlarge(this, icon.ID); };
icon.onmouseout = function(){ reduce(this, icon.ID); };

正确代码：

icon.onmouseover = function(){ enlarge(this, this.ID); };
icon.onmouseout = function(){ reduce(this, this.ID); };

发生了什么：您将一个事件与一个函数绑定并将变量传递给它。在每个 for 循环之后，您重新定义了该函数变量（所以最后，您的 icon.ID=3）。这意味着所有事件都调用了使用相同 icon.ID=3 的函数。

我希望这是有道理的...

于 2012-10-10T05:17:41.713 回答