Javascript Mouseover和Mouseout之间触发的事件顺序

假设我的鼠标从elementA移到elementB

---

触发事件的顺序是什么？

鼠标移动

，

鼠标移动

，

鼠标移动

，

鼠标移动

，

鼠标移动

，

鼠标移动

，等等

这是我最好的猜测

但我有点错了。这应该可以帮到你：添加你需要的事件（这个例子使用jQuery，你也可以用普通的JavaScript来做，但我不想在这上面花太多时间）

好的，下面是代码：

$(document).ready(function(e) {
    $('.canary').on('mouseout mouseleave mouseenter mouseover', function(event){
        $('#test').text($('#test').text() + ', ' + event.type)      });
});

以下是您的CSS：

.canary{
    width:200px;
    height:100px;
    background-color:#066
    }

你的HTML

<textarea name="test" id="test" cols="200" rows="10"></textarea>
<div class='canary'></div>
<br /><br />
<div class='canary'></div>

---

以下是

规范对这些事件的顺序提出了一些要求，但在某些情况下，顺序显然取决于浏览器。看

本规范中定义的某些鼠标事件必须以相对设置的顺序发生。以下显示了定点设备的光标在元素上移动时必须发生的事件序列：

Event Type  Element Notes
1   mousemove       Pointing device is moved into element A...
2   mouseover   A   
3   mouseenter  A   
4   mousemove   A   Multiple mousemove events

Pointing device is moved out of element A...
5   mouseout    A   
6   mouseleave  A   

当定点设备移动到元素a中，然后移动到嵌套元素B中，然后再次移出时，必须发生以下事件序列：

Event Type  Element Notes
1   mousemove       
Pointing device is moved into element A...
2   mouseover   A   
3   mouseenter  A   
4   mousemove   A   Multiple mousemove events

Pointing device is moved into nested element B...
5   mouseout    A   
6   mouseover   B   
7   mouseenter  B   
8   mousemove   B   Multiple mousemove events

Pointing device is moved from element B into A...
9   mouseout    B   
10  mouseleave  B   
11  mouseover   A   
12  mousemove   A   Multiple mousemove events

Pointing device is moved out of element A...
13  mouseout    A   
14  mouseleave  A

它们继续指示元素是否嵌套在DOM中，但占用

---

最里面的DOM元素会发生相同的空格、mouseover和mouseout事件。我不清楚该规范是否意味着排除祖先DOM节点的mouseover和mouseout事件的可能性，这些事件未显示在它们的示例事件序列中。

在询问之前，您读过或写过什么吗？