我正在对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文本区域中,以查看我在说什么)
最佳答案
您的代码:
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)。这意味着所有on事件调用函数都使用相同的icon.ID = 3。
我希望这有道理...
关于javascript - 包含间隔执行不正确的onmouseover和onmouseout函数,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/12811942/