jQuery mouseover和mouseenter的区别

猫斯基  — jQuery


mouseover:当鼠标移入元素或其子元素都会触发事件,所以有一个重复触发,冒泡过程。对应的移除事件是mouseout

mouseenter:当鼠标移除元素本身(不包含元素的子元素)会触发事件,也就是不会冒泡,对应的移除事件是mouseleave

mouseovermouseenter的异同体现在两个方面:

1. 是否支持冒泡

2.事件的触发时机

先看一张图,对这两件事有一个简单直观的感受。

jQuery mouseover和mouseenter的区别

mouseenter事件的情况:

当鼠标从元素的边界之外移入元素的边界之内时,事件被触发。而鼠标本身在元素边界内时,要触发该事件,必须先将鼠标移出元素边界外,再次移入才能触发。

也就是说:mouseover支持事件冒泡,而mouseenter不支持事件冒泡

由于mouseenter不支持事件冒泡,导致在一个元素的子元素上进入或离开的时候会触发其mouseovermouseout事件,但不会触发mouseentermouseleave事件。

参考链接:https://juejin.im/post/5935773fa0bb9f0058edbd61

阅读量:0 2020-12-04 00:53

返回顶部