几种mouse事件和处理函数的区别: mouseover/out, mouseenter/mouseleave , hover?

js/jquery中, 有鼠标移入/移除功能的事件和方法:

1. mouseover/mouseout: 这个是鼠标移入/移除的 , 它会在子元素上绑定 冒泡事件. 所以当鼠标在父元素/子元素之间进行移动的时候, 会 触发元素上的over/out事件多次.

2. mouseenter/leave 这个是鼠标进入/离开, 它不会在子元素上绑定冒泡事件, 所以即使鼠标在父子元素间移动(移入/移出时)都不会触发 enter/leave事件, 整个mouseenter/mouseleave
   事件只会触发一次.

3. 实际上, mouseover就是 普通意义上的 mouse in(鼠标移入)的事件. (因为 jjs中没有 mousein函数的.

4. 跟它们相关的还有一个 hover(不是mousehover), 它实际上是等于 hover = mouseenter + mouseleave

5. 为什么在某个元素上绑定鼠标移入/移出事件的时候, 控制另一个div中的图片显示/隐藏时, 图片会产生闪烁呢?

• 这个图片闪烁, 还不能用 mouseover/out 改成 mouseenter/leave 来解决; 也不能用 hover来解决.
• 原因是: 因为这个 显示或隐藏的图片的位置, 刚好在 鼠标移入/移除事件的触发目标上了, 这样: 当鼠标进入目标元素中时, 图片被显示, 因为图片又刚好在这个目标元素上, 它就遮住了目标元素, 引起鼠标"移出"目标元素, 从而触发图片的隐藏事件; 当图片隐藏后, 鼠标又进入到目标元素中,从而又触发 显示图片的事件, 当图片显示后, 又遮住了目标元素, 又引起鼠标丢失, 又触发隐藏图片的事件, 如此反复发生, 就引起了图片的闪烁

那么解决方法,就是, 调整一下图片显示的位置, 让图片显示/隐藏的div 容器不要遮住 目标元素就好了

鼠标 over/out 和 enter/leave的区别?

标签：mouseleave,触发,hover,鼠标,元素,事件,mouseenter,处理函数,图片
来源： https://www.cnblogs.com/bkylee/p/12430436.html