jQuery mouseover mouseout事件在IE下闪烁的解决方法

下午 ihipop 叫我帮他看一下他写的 JavaScript 下拉菜单在 IE 下奇怪表现的问题。他说在 FireFox 下好好的，但是在垃圾 IE 中却会闪烁。

打开他给我的网址（涉及商业秘密，这里就不贴出来了），下拉菜单的 JavaScript 代码是这么写的：

$("#category ul").find("li").each(
    function() {
        $(this).mouseover(
            function() {
                $("#" + this.id + "_menu").show();
                $(this).addClass("a");
            }
        );
        $(this).mouseout(
            function() {
                $(this).removeClass("a");
                $("#" + this.id + "_menu").hide();
            }
        );
    }
);

浏览器之间的不兼容一直令前端开发者的头疼，而 IE 更是噩梦。鼠标在下拉菜单移动时菜单会不断闪烁，说明不断触发了 mouseover 和 mouseout 事件。

这貌似涉及到所谓的“事件冒泡”，我不懂 JavaScript，就不在误人子弟了，详情请自己 Google，这里只给出解决方法：将 mouseover 改成 mouseenter，mouseout 改成 mouseleave。

$("#category ul").find("li").each(
    function() {
        $(this).mouseenter(
            function() {
                $("#" + this.id + "_menu").show();
                $(this).addClass("a");
            }
        );
        $(this).mouseleave(
            function() {
                $(this).removeClass("a");
                $("#" + this.id + "_menu").hide();
            }
        );
    }
);

最后指出一点，mouseenter 和 mouseleave 事件是 jQuery 库中实现的，似乎（再次声明我不懂 JavaScript，所以这里用“似乎”）并不是浏览器的原生事件，所以如果你想自己写 JavaScript 实现的话，请自行 Google，或者查看 jQuery 源码，如果你能看懂的话。

参考链接：JQuery HowTo: Problems with jQuery mouseover / mouseout events

随机文章:

1. 用C语言实现PHP的base64_encode函数
2. Unicode中的Enclosed CJK Letters and Months
3. WordPress回复可见插件Easy2Hide
4. VBS实现全角字符转半角字符
5. VBS变量名Wsh等于WScript对象？

这篇文章发布于 2011年11月7日，星期一，17:45，归类于 程序设计。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。