标题: jQuery mouseover mouseout事件在IE下闪烁的解决方法
作者: Demon
链接: https://demon.tw/programming/jquery-mouseover-mouseout.html
版权: 本博客的所有文章,都遵守“署名-非商业性使用-相同方式共享 2.5 中国大陆”协议条款。
下午 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
赞赏微信赞赏支付宝赞赏
随机文章:
哈哈 非常感谢,解决了我一个非常重要的问题
十分感谢
非常感谢,解了我的燃眉之急……
可以使用jquery提供的hover事件来解决这个bug
用了您的方法解决了网页好用多了,非常感谢
太感激了!!!!!!谢谢!!!!!
精炼、实用
太感谢你了朋友,解决了很头疼的问题