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

Question

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

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

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

• 当鼠标移动 1 --> > 2

  <块引用>

  鼠标悬停2

• 鼠标移动时2 --> 3

  <块引用>

  鼠标悬停 2
  鼠标悬停 3
  鼠标悬停 2

• 鼠标移动时 3 --> 4

  <块引用>

  鼠标悬停 3
  鼠标移出 2
  鼠标悬停 4
  鼠标悬停 2
  鼠标悬停 3

• 鼠标移动时 4 --> 5

  <块引用>

  鼠标悬停 2
  鼠标悬停 5
  鼠标移出 3
  鼠标悬停 4
  鼠标移出 4
  鼠标悬停 3
  鼠标悬停 2

• 鼠标移动时 5 --> 4

  <块引用>

  鼠标悬停 5
  鼠标移出 4
  鼠标悬停 3
  鼠标悬停 4
  鼠标移出 2
  鼠标移出 3
  鼠标悬停 2

• 鼠标移动时 4 --> 3

  <块引用>

  鼠标悬停 4
  鼠标悬停 3
  鼠标悬停 2
  鼠标移出 3
  鼠标移开 2

• 鼠标移动时 3 --> 2

  <块引用>

  鼠标悬停 3
  鼠标移出 2
  鼠标悬停 2

• 鼠标移动时2 --> 1

  <块引用>

  鼠标悬停 2

我特别使用 Firefox 9.0。请告诉我网络浏览器之间是否存在差异。

Answer 1

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

与 mouseover 类似，不同之处在于它不会冒泡并且那
直到指针移出其物理空间并且才会发送它
它的所有后代之一。

另外，我建议使用并且我大部分时间都使用 jQuery Hover 帮助器，它绑定那些无错误的冒泡事件。