DOM事件中mouseover和mouseenter的区别

之前在模仿qq首页的时候,有一个菜单弹出的窗口。

菜单分两部分,一部分是一直显示的,一部分是隐藏的。在鼠标进入到菜单上时,打开隐藏部分的按钮会变色,点击按钮会显示隐藏的菜单部分。

在制作这个过程中遇到了mouseover事件和mouseenter事件的不同,在这记录下来。

菜单简易的表示是这个样子的:

item
item
item
item
按钮

鼠标悬浮到菜单上时,按钮变换颜色。点击按钮可以显示隐藏的菜单。鼠标移出菜单区域或者再次点击按钮,可以收回隐藏的菜单。

使用mouseover/mouseout事件

我最开始使用的方法是在菜单元素上绑定mouseover事件,但是这样会出现一个问题,就是菜单中的每个项目在鼠标移入移出时都会产生mouseover和mouseout事件,并且这个事件会向上冒泡被他们的父元素也就是菜单捕获到。

效果大概是这样的:

item
item
item
item
按钮

结果就是点击按钮不会展开隐藏的菜单,因为在点击的一瞬间触发了一个鼠标移出按钮的mouseout事件,将隐藏的菜单又瞬间关闭了。

使用mouseenter/mouseleave事件

而使用mouseenter/mouseleave处理事件就可以得到比较好的效果。

item
item
item
item
按钮

mouseover/mouseout事件和mouseenter/mouseleave事件的区别

mouseover/mouseout事件会冒泡,且移入/移出的另一个元素可能位于前一个元素的外部,_也可以是这个元素的子元素_。

mouseenter/mouseleave事件不冒泡,且_光标移动到后代元素上不会触发_。

下面这个例子可以很清楚的看出两者的不同:

mouseover触发次数:0

item

mouseenter触发次数:0

item

鼠标滑过其中的item元素可以看到区别。