4

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

触发事件的顺序是什么？

4

2 回答 2

3

mousemove, mouseleave, mouseout, mousemovex 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>

这是一个现场演示

于 2012-04-04T12:55:35.647 回答
0

规范对这些事件的顺序提出了一些要求，但在某些情况下，顺序显然取决于浏览器。请参阅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

They go on to indicate that if elements are nested in the DOM, but occupy the same space, mouseover and mouseout events occur for the innermost DOM element. It is not clear to me whether the spec means to exclude the possibility of mouseover and mouseout events for the ancestor DOM nodes, not shown in their example event sequence.

于 2018-11-20T17:16:14.707 回答