鼠标移入和移出之间事件触发的顺序

Question

假设我的鼠标从元素A移出并悬停在元素B上。

那么事件将按什么顺序触发？

- Imran Qadir Baksh - Baloch

---

在提问之前，您有阅读或编写任何内容吗？ - Andrew Whitaker

我意识到这个问题现在已经超过十年了，但如果有人来到这里是因为试图处理鼠标在两个元素之间的传递，那么event对象的relatedTarget属性可能会有用，并消除了需要监听两个事件的需要。你可以在这里查看一个描述（https://javascript.info/mousemove-mouseover-mouseout-mouseenter-mouseleave），截至我发布这篇文章的日期为2022年4月17日。 - Gary

Answer 1

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
    }

Your HTML

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

这里有一个实时演示，请点击此处。

- Thierry Blais

Answer 2

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

本规范中定义的某些鼠标事件必须相对于彼此以特定顺序发生。以下显示了指针设备移动到一个元素上时必须发生的事件序列：

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中嵌套，但占据相同的空间，则mouseover和mouseout事件会发生在最内层的DOM元素上。我不确定规范是否意味着排除祖先DOM节点的mouseover和mouseout事件的可能性，这些节点在他们的示例事件序列中未显示。

- Cris P