标签 mouseenter 下的文章

mouseenter、mouseover;mouseleave、mouseout的区别

在jQuery里面,鼠标事件有两对比较容易混淆的。

  • mouseenter和mouseover
  • mouseleave和mouseout

既然容易混淆,把这4个重新组合一下,变成
mouseover/mouseout VS mouseenter/mouseleave

这样是不是清晰多了?至少样子上是。

mouseover/mouseout在原生JS中一直都是有的,也就是onmouseover和onmouseout事件,而且,特大好消息的是,曾经只有IE支持的onmouseenter和onmouseleave事件现在已经来到了Chrome和Firefox中:

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 30 10.0 (10) All 11.10 Not supported

要说区别,非常简单:mouseover/mouseout的事件会冒泡(event bubbling),也就是说,假设把mouseover/mouseout事件绑定到了父元素,那么它其中的任何子元素只要发生了mouseover/mouseout事件,同时也会触发父元素的mouseover/mouseout事件,父元素的父元素也会触发……然后一直向上,就像池塘的气泡一样一直往上冒。

而mouseenter/mouseleave不会发生事件冒泡,属于传统思维上的鼠标进出。

- 阅读剩余部分 -