mouseenter

概述

当鼠标指针进入一个元素的边界区域时,会触发一个同步模式的 mouseenter 事件。

该事件和 mouseover 事件的不同点是,该事件不允许冒泡,并且当鼠标从一个元素的某个后代元素进入到它自身的区域上时,不会触发该事件.

mouseenter.png

当进入 Text 时,该层次结构中的每个 div 元素都会触发一个 mouseenter 事件。       

(由于四个 div 元素都占用相同的位置,边界区域相同。这样会从内层元素开始依次向外触发事件)

mouseover.png

当进入 Text 时,只有最内层的 div 元素的 mouseover 事件被触发,然后一直向顶层元素冒泡.直到被取消冒泡或者到达根元素。

如果网页的层次结构很深,则 mouseenter 事件会在大量元素上触发。这样会造成显著的性能问题。这种情况下,使用 mouseover 事件更合适点。

结合该事件对应的事件 mouseleave 来看,mouseenter 事件和 CSS 伪类 :hover 两者的表现比较相似。

  • 接口:MouseEvent
  • 是否同步模式:同步模式
  • 是否冒泡:
  • Target : element
  • 是否可以取消默认动作:
  • 默认动作 :

规范

Specification Status Comment
DOM3 Events Working Draft  

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 30 10 (10) (Yes) 11.10 Not supported
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support (Yes) 10.0 (10) ? ? Not supported

相关链接

 

附件

文件 大小 日期 附加者为
mouseenter.png
18425 字节 2011-11-18 15:43:20 teoli
mouseover.png
22115 字节 2011-11-18 15:48:32 teoli
viewport fail 2
137577 字节 2013-08-15 10:25:54 chrisdavidmills

Document Tags and Contributors

Contributors to this page: ziyunfei, nuy
最后编辑者: ziyunfei,