Mouseover和Mouseout之间的事件顺序

Order of events firing between Mouseover and Mouseout

本文关键字：事件 顺序 之间 Mouseout Mouseover      更新时间：2023-09-26

假设我的鼠标从elementA移出并悬停在elementB上。

事件被解雇的顺序是什么？

mousemove、mouseleave、mouseout、mousemove x x、mouseenter、mouseover、mousemove等等…

这是我最好的猜测。。。

但我有点错了。这应该为你做：添加你需要的事件（这个例子使用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>

这是实时演示

规范对这些事件的顺序提出了一些要求，但在某些情况下，顺序显然取决于浏览器。看见https://www.w3.org/TR/DOM-Level-3-Events/#events-mouseevent事件顺序。

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

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

它们继续指示if元素嵌套在DOM中，但占用最里面的DOM元素会发生相同的空格、mouseover和mouseout事件。我还不清楚规范是否意味着排除祖先DOM节点的mouseover和mouseout事件的可能性，这些事件没有显示在它们的示例事件序列中。

相关文章：