鼠标移动通过重叠或嵌套区域时的事件计时

Question

当我有嵌套对象时，鼠标经过时发生的事件的时间非常违反直觉和复杂。有人可以解释时间规则吗？

例如，当我嵌套div时，如下所示：

其中每个div都有onmouseover和onmouseout属性，以便它们触发事件，它们按以下顺序执行：

• 当鼠标移动1 - > 2

    

  mouseover 2

• 当鼠标移动时2 - > 3

    

  mouseout 2
    mouseover 3
    mouseover 2

• 当鼠标移动3 - > 4

    

  mouseout 3
    mouseout 2
    mouseover 4
    mouseover 2
    mouseover 3

• 当鼠标移动4 - > 5

    

  mouseout 2
    mouseover 5
    mouseout 3
    mouseover 4
    mouseout 4
    mouseover 3
    mouseover 2

• 当鼠标移动5 - > 4

    

  mouseout 5
    mouseout 4
    mouseover 3
    mouseover 4
    mouseout 2
    mouseout 3
    mouseover 2

• 当鼠标移动4 - > 3

    

  mouseout 4
    mouseover 3
    mouseover 2
    mouseout 3
    mouseout 2

• 当鼠标移动3 - > 2

    

  mouseout 3
    mouseout 2
    mouseover 2

• 当鼠标移动时2 - > 1

    

  mouseout 2

我特别使用Firefox 9.0。如果webbrowsers之间存在差异，请告诉我。

Answer 1

我强烈建议您使用mouseenter和mouseleave个事件。使用嵌套元素时，鼠标悬停和鼠标移除很棘手。 来自docs：

  

与鼠标悬停类似，它的不同之处在于它并不是bubble   它不会被发送，直到指针从其物理空间移动并且   所有后代中的一个。

我也建议使用，我大部分时间都使用jQuery Hover帮助器来绑定那些非错误冒泡的事件。