Javascript中常见的一个鼠标悬停离开BUG

Apr 5th Fri, 2013/JiaJieChan/折腾/2,087 阅读/7 评论
daima_6598135193424684709

在文章的开端先要说一下,JiaJieChan其实也不懂得Javascript(以下简称JS),不过接触的时间长了,一些文件合并、加载也是知道的。一看JS就头疼,贼长的代码且对这些代码不认识,就像昨晚把菜单栏修改为支持WP自定义菜单、参照mg12的文章修改菜单栏为多级无限菜单,真是把我头都搞大了。我比较喜欢滚动效果,可是目前的JS里面没有这个滚动效果的代码,希望高手能帮我加上去。

今天要说的是一个鼠标事件的bug,也不知道算不算是bug,应该算是一个书写错误吧。我最近都在很多blog网站等看到过这种bug。症状体现为鼠标悬停到某一元素,会弹出一个悬浮层,当鼠标离开它就会消失,当鼠标重复快速的做此动作时,弹出消失的事件就会不停的重复,直至达到刚才鼠标悬停离开的次数。普片出现在菜单栏(二级菜单),其实陈家杰BLOG早前的QR文章二维码也有这个情况(已修复),到今天又看到其他BLOG有这个问题,特意将它记录下来以备不时之需。

照成这个问题是由于悬停动作没有加上锁定,即:hidden:visible,下面看看这两段代码,均取自应用在不同的地方,但它们的原理都差不多。

[code lang="js" highlight="3,6" title="代码片段一"]
$(document).ready(function(){
$('li.mainlevel').mousemove(function(){
$(this).find('ul').slideDown();
});
$('li.mainlevel').mouseleave(function(){
$(this).find('ul').slideUp("fast");
});
});

[code lang="js" highlight="4,6" title="代码片段二"]
$(document).ready(function(){
$(".qr").hover(
function(){
$("em:hidden").show(499);
}, function(){
$("em:visible").hide(599);
});
});

片段一为某一网站菜单,并没有解决bug。片段二为本博的QR载入,已经解决bug。

看完想必看到上面两个代码片段都明白了吧,还没有明白? 继续往下看;

重中之重

原因就是出在hiddenvisible,在要指定的元素后加上相关的代码就能够锁定,当鼠标离开就停止动作,注意不要把冒号漏了。

很少写这些有价格的东东,不管怎样都吐槽一下噢。昨晚顺便把边栏那些杂七杂八的东西又整理了下,现在吐槽还有机会上榜哦。“为了更好的解决问题,下面,请吐槽前射好你们的gravatar头像噢,不会的可以看看评论框旁边的支持gravatar。”

声明: 本文采用 BY-NC-SA 协议进行许可. 转载请出示版权信息.
  1. Jul 24th, 2013 at 11:30 / #Url

    我对脚本很白痴

  2. sdfad
    Apr 22nd, 2013 at 13:08 / #Url

    试一下邮件通知, 亲你收到了吗?

  3. Apr 18th, 2013 at 21:40 / #Url

    @奋斗
    谢谢, 顺道测试一下邮件通知, 亲你收到了吗?

  4. Apr 17th, 2013 at 22:24 / #Url

    越来越细致了,不错!

  5. Apr 11th, 2013 at 19:20 / #Url

    @图图电影网
    只是加个hiddenvisible啊. 15:)

  6. Apr 11th, 2013 at 17:52 / #Url

    好深奥哦。。

  7. Apr 11th, 2013 at 15:20 / #Url

    看了之后还是没搞美白。。。。

  1. 本文目前尚无任何 trackbacks 和 pingbacks.
支持使用Gravatar头像

JiaJieChan提醒您: 要回复某人的评论,请将鼠标移动到那条评论,评论右边就会出现Replay字样(一定是要鼠标指针中的评论),在评论框中出现的的后面下一行填写评论提交即可.被回复者将收到邮件通知噢; 要是想直接对本文评论请直接在评论框留言即可,然后点提交.