有朋友在群里讨论 mouseenter 和 mouseover 的区别,这个问题不难解释(尽管我也是查了 msdn 才搞清楚,但我觉得这个问题知道在哪里能查到就可以了。把这个问题作为面试题目可能会让人摸不着头脑,因为这不是浏览器兼容性问题)。
首先, mouseenter 是 IE 自己定义的事件( Firefox16 已经开始支持该事件, Chrome 暂不支持)。
其次,触发该事件的条件, MSDN 上也解释得很清楚。
The event fires only if the mouse pointer is outside the boundaries of the object and the user moves the mouse pointer inside the boundaries of the object. If the mouse pointer is currently inside the boundaries of the object, for the event to fire, the user must move the mouse pointer outside the boundaries of the object and then back inside the boundaries of the object.
即从鼠标从元素边界外进入到元素边界内时触发。
第三,同 mouseover 的区别。这点主要体现在元素内部嵌套元素的情况下。当鼠标进入到内部元素时,会触发外部元素的 mouseout 事件,再触发内部元素 mouseover 事件,然后 mouseover 事件冒泡至外部元素再次触发外部元素的 mouseover 事件。如果内部元素足够复杂,最外部元素 mouseover 会出现被多次触发的混乱情况。这种情况归根结底是事件冒泡导致的,而 mouseenter 事件不冒泡,即鼠标在元素内部移动的过程中不会触发 mouseenter 事件,从而解决了使用 mouseover 的问题。
最后,上面讨论的是浏览器的事件,不是 jQuery 定义的 mouseenter 事件,如果有兴趣可以看看 jQuery 如何模拟各种浏览器的 mouseenter 。