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。”

Last modification:June 25th, 2021 at 08:35 pm
If you think my article is useful to you, please feel free to appreciate