为什么鼠标还没完全移出就触发元素的mouseout事件
2017-03-22 14:58
141 查看
想知道这个原因,只需要清楚的明白一下几个jQuery事件:
例 :<div><span></span></div>
1.mouseover() : 如果鼠标指针穿过任何子元素,同样会触发 mouseover 事件。
注:例中div使用了mouseover
事件,鼠标在进入div到span再出去,会触发3次mouseover 事件;
2.mouseenter() : 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。
注:例中div使用了mouseenter
事件,鼠标在进入div到span再出去,会触发1次mouseenter事件;
3.mouseout() : 如果鼠标指针离开任何子元素,同样会触发 mouseout 事件。
注:例中div使用了mouseout
事件,鼠标在进入div到span再出去,会触发3次mouseout 事件;
4.mouseleave() : 只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。
注:例中div使用了mouseleave
事件,鼠标在进入div到span再出去,会触发1次mouseleave 事件;
所以它们的区别就是mouseover和mouseout拥有冒泡属性,将 mouseout()
换成 mouseleave() 即可!
例 :<div><span></span></div>
1.mouseover() : 如果鼠标指针穿过任何子元素,同样会触发 mouseover 事件。
注:例中div使用了mouseover
事件,鼠标在进入div到span再出去,会触发3次mouseover 事件;
2.mouseenter() : 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。
注:例中div使用了mouseenter
事件,鼠标在进入div到span再出去,会触发1次mouseenter事件;
3.mouseout() : 如果鼠标指针离开任何子元素,同样会触发 mouseout 事件。
注:例中div使用了mouseout
事件,鼠标在进入div到span再出去,会触发3次mouseout 事件;
4.mouseleave() : 只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。
注:例中div使用了mouseleave
事件,鼠标在进入div到span再出去,会触发1次mouseleave 事件;
所以它们的区别就是mouseover和mouseout拥有冒泡属性,将 mouseout()
换成 mouseleave() 即可!
相关文章推荐
- 如何防止鼠标移出移入子元素触发mouseout和mouseover事件
- 如何防止鼠标移出移入子元素触发mouseout和mouseover事件
- 相对定位父子元素触发mouseover和mouseout事件实验
- 鼠标移出DIV层时,触发onMouseOut事件
- 鼠标移入事件 动态元素 事件委托 鼠标移入移出 弹出对话框事件
- 快速移动鼠标导致js 的mouseover,mouseout,mouseenter,mouseleave等事件(触发动画)反复叠加的处理
- mouseover和mouseout事件在鼠标经过子元素时也会触发
- (笔记)鼠标移动到一个 元素上所触发的事件
- 鼠标点击 INPUT 元素后默认触发的事件执行顺序
- IE下元素空白区域(该元素在上img在下)与图片重叠无法触发鼠标事件
- 鼠标指针被高层元素挡住时,触发下层元素的鼠标事件
- mouseover和mouseout事件在鼠标经过子元素时也会触发
- 鼠标经过子元素触发mouseout,mouseover事件的解决方案
- 解决鼠标经过内部元素触发onmouseout事件的问题
- IE 下元素空白区域与图片重叠无法触发鼠标事件
- jQuery事件 mouseover方法与mouseout方法实现鼠标移进显示移出消失的效果 (css控制span标签)
- jquery的鼠标移入移出事件hover、mouseenter、mouseleave、mouseover、mouseout
- 鼠标经过子元素触发mouseout,mouseover事件的解决方案
- 鼠标hover和移出触发jQuery事件代码
- IE9及以下 span元素无法触发鼠标事件解决办法