为什么以未指定的顺序触发jQuery mouseenter事件？

Question

我有3个div，彼此包含Matryoshka doll。

对于所有div，我有一个函数绑定了mousenter事件。现在从底部慢慢移动鼠标 ，进入第三层将导致以下事件：

1. Mouseenter layer one
2. Mouseenter第二层
3. Mouseenter layer three

哪个是完美的，预期的结果，因为你需要先输入第一层，才能进入第二层等等。

但是，如果我使用 快速 鼠标移动执行相同操作，则订单将不会指定，例如：

1. Mouseenter第二层
2. Mouseenter layer one
3. Mouseenter layer three

这对我来说没什么意义 - 在进入第一层之前，你的鼠标如何进入第二层？

无论如何，问题是：有没有办法强制jQuery或javascript一般以自然顺序触发这些事件？如果不是，你能否建议我一个解决方法，比如以某种方式从我的事件处理函数中对事件进行排序，并推迟那些过早调用的事件？

测试代码发布在http://jsbin.com/ibepu6/4/

Answer 1

通常，mouseenter和mouseleave事件都是基于微软的事件，jquery使它们可以在所有使用其他功能的浏览器中使用来创建这种效果......首先要对jquery event page中的演示进行测试。我不检查jquery源代码，但据我所知，javascript中有两种不同的事件排序机制......事件捕获和事件冒泡......

This document 并不新鲜，但它描述了您需要的基础知识。关于鼠标事件的This is an older document以及它们是如何执行的......

请检查jquery源并查看mouseenter和mouseleave的工作原理。正如我之前所说的那样，它不是仅在IE上运行的基本功能，而是通过使用其他javascript函数就像mouseenter和mouseleave事件一样的模拟......这就是jquery如何使这两个Microsoft事件对所有浏览器都可用。

Answer 2

我在Jsbin中编辑了您的代码，以便对触发的事件进行排序。我不确定它对你的情况是否有用，但这里是代码Edited Jsbin

Answer 3

问题是：

你无法在任何情况下将鼠标直接带到第三层，因为它位于第二层内部。第二层和第一层有可见部分。

无论您移动鼠标的速度有多快，它仍会在第三个之前触发第一个或第二个。没有明显的解决方案，鼠标悬停的可见第二层和第一层部分将始终在第三层之前触发第二个和第一个鼠标悬停。如果你移动得非常快，这个订单可以改变，但不能保持一致。