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不会发生事件冒泡,属于传统思维上的鼠标进出。

通过下面的demo就可以清晰看到区别。(改编自jQuery的官方api文档的范例)

点击查看mouseenter-mouseover-demo

mouseenter-mouseover-demo

如图所示,即使在子元素内部,从一个p元素移出来,移到了子元素空白区域,这样也会触发子元素的mouseout事件,并且同时也会触发父元素的mouseout。我的理解是即使是空白区域,也是一块新地方,并且属于子元素,所以就触发了它的mouseout事件。

mouseout、mouseover就是一举一动都会产生很多事情的感觉,既然主流浏览器都支持mouseenter/mouseleave了,也不用像jQuery一样用代码来模拟了。不过Safari...话说有公司要求必须Safari正常使用的么?
最后感叹一句,IE在这件事上还挺先进的,IE6就支持mouseenter/mouseleave了。

标签: 区别, mouseout, mouseenter, mouseover, mouseleave, Javascript事件

添加新评论