在写多级滑动菜单时体验了一把mouseenter/mouseleave和mouseover/mouseout区别.主要是mouse进入子元素时父元素的事件触发的区别。
1.先说说mouseover/mouseout。
1.1当mouse进入父元素时触发父元素mouseover事件;
1.2当mouse从父元素进入到子元素时,会先触发父元素的mouseout事件=>触发子元素的mouseover事件=>如子元素mouseover事件处理中不返回false则会把mouseover事件传递给父元素,则父元素也触发了一次mouseover;
1.3当mouse从子元素A进入到另一个相临的子元素B时,会解发A的mouseout事件=>A的mouseout事件可以传递给父元素=>触发B的mouseover事件=>B的mouseover事件可以传给元素。
1.4当mouse从子元素进入到父元素时,会触发子元素mouseout事件=>子元素mouseout事件可以传递给父元素=>解发父元素的mouseover事件。
1.5当mouse从子元素移到外面,即也移到父元素外面,会触发子元素mouseout事件=>子元素mouseout事件可以传递给父元素;
2.再说说mouseenter/mouseout。这两个事件要jquery1.4以后版本才支持。
2.1当mouse进入父元素时触发父元素mouseenter事件;
2.2当mouse从父元素进入到子元素时,只触发子元素的mouseenter事件;
2.3当mouse从子元素A进入到另一个相临的子元素B时,会解发A的mouseleave事件=>触发B的mouseenter事件;
2.4当mouse从子元素进入到父元素时,会触发子元素mouseleave事件=>解发父元素的mouseenter事件。
2.5当mouse从子元素移到外面,即也移到父元素外面,会

本文详细介绍了在实现横向多级滑动菜单时遇到的jQuery事件处理问题,主要讨论了mouseover/mouseout和mouseenter/mouseleave的区别。mouseover/mouseout在鼠标进入子元素时会触发父元素事件,而mouseenter/mouseleave则不会。文章通过实例展示了这些事件在不同情况下的触发顺序和条件,帮助开发者更好地理解和选择适合的事件。
最低0.47元/天 解锁文章
346

被折叠的 条评论
为什么被折叠?



