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

Question

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

例如，当我嵌套div如下 s 时：

每个 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帮助程序，它绑定了那些非错误冒泡事件。