在父级元素上注册了mouseover和mouseout事件后,当鼠标移动到子元素上时,会触发父级的mouseout和mouseover事件,反复触发,形成闪烁. 原因: 一种是由于冒泡,子级的mouseover和mouseout触发了父级的mouseover和mouseout,一种是不明原因,也会造成这个现象. 解决方法: 1. setTimeout,类似于debounce处理 $('div').mouseout(function(){       clearTimeout(t);      …

$(document).ready(function(){ $(".anli").hover( function(){ var $div = $(this); t = setInterval(function(){ $div.children().fadeIn(300) },100); },function(){ clearInterval(t); $(this).children('div').fadeOut(); }) }) 具体原理我没有看,我想大概就是     用hover事件…

问题:在jQuery中,对元素绑定mouseover和mouseout事件时,每次移入移出该元素和子元素时,都会触发事件,从而会出现闪动的现象. 原因:浏览器的冒泡行为. 解决方案: 使用mouseenter事件和mouseleave事件分别代替mouseover事件和mouseout事件. 例如有如下代码: <style> div{width: 50px;height: 50px;background:#ccc;} #test{background:red;width: 100px;heig…

在用到mouseover和mouseout事件来作为事件触发的条件,但是如果我们用做触发的元素内部有其他的元素的时候当鼠标移上的时候会反复的触发mouseover和mouseout事件,如导致菜单闪烁等问题.因为内部元素在鼠标移上的时候会向它的父对象派发事件,所以外面元素相当于也触发了mouseover 事件. 为了阻止mouseover和mouseout的反复触发,这里要用到event对象的一个属性relatedTarget,这个属性就是用来判断 mouseover和mouseout事件目标节…

相信做前端开发的都听说过“冒泡型事件”吧,<JavaScript高级程序设计>第九章有详细的讲述,但是,在学习的时候一知半解,也没详细去理解,导致最近在工作中碰到了问题:有许多 li 标签,标签上有2个按钮,当且仅当鼠标移入 li 时才会显示上面的2个按钮,如下图,左边是默认状态,右边是鼠标移入状态,开始使用的是 mouseover 和 mouseout ,结果鼠标移动到按钮上时,按钮会出现闪烁的情况.      后来对比了mouseover,mouseout,mouseenter,mouse…

在div内想实现鼠标移入移出效果,最开始的时候是用了jquery的mouseout和mouseover事件来实现的, $('.product).mouseover(function(){ …… }).mouseout(function(){ …… }); 但是当鼠标在div内的元素移动时也触发了mouseout事件,第一时间想到的是自己代码是不是写错了,但是检查了很多遍,发现没有问题的, 既然代码没有问题,那为什么会出现这种情况?后面想不到原因就上网搜索下,结果发现确实是存在这种情况,解决方法是…

又一个傻傻分不清楚的东东~ 现实真是一个问题天天有的世界~本以为我对js中的事件还是比较了解的,对于早就接触的mouse事件,更是觉得得心应手了~但是现实却给了我一记重拳! 我自身工作中遇到的犯二的故事就不说了...实在太...所以就进入主题! 简单的记录一下mouse事件中比较容易搞混的: mouseover和mouseout他们是一对,而mouseenter和mouseleave是另外一对! 对于大牛们来说,我这么分组应该一目了然了,然而对于新手可能可以往下看看. mouseover和mou…

心情压抑的一天,我想好好的. mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseout与mouseleave 不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件. 只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件. mouseover.mouseout事件冒泡…

$('.box1').mouseenter(function(){//穿入事件mouseenter $(this).css('background','red'); }).mouseleave(function(){ $(this).css('background','green'); }) 再看看看一张效果图片: 这貌似和移入.移出事件区别.如果在.box1添加一个层,会怎么样了??? <div class="box1"> <p></p> <…

说道hover和mouseover,mouseout的区别,不得不联系到mouseenter,mouseleave. mouseover,mouseout是指鼠标指针在穿过/离开被选元素或其子元素时触发. mouseenter,mouseleave是指鼠标指针在穿过/离开被选元素时触发. 举个简单例子: <div class="wapper"> <h1></h1> <p></p> </div> <div cl…