Question

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

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

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
    }

您的HTML

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

这是 a live demo

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中，但占据了在最内部的DOM元素中，发生相同的空间，mouseover和mouseout事件。对于我来说，尚不清楚规范是否意味着要排除祖先DOM节点的鼠标悬停和鼠标停出事件的可能性，这些事件未在其示例事件序列中显示。

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

2 个答案: