为什么mousein在子元素上执行时触发了mouseout？

Question

mouseout事件from MDN的定义为：当指点设备（通常为小鼠）移离贴有听众或关闭它的一个子元素

mouseout事件被触发。

所以，如果我有一个div容器为之mouseout连接，然后我想到，如果鼠标从任何子女搬出被解雇的事件。但是我看到的是，如果鼠标移动到容器的小孩，那么mouseout正在被解雇。这里是例子：

x = 0; 
 
$(document).ready(function(){ 
 
    $("div.over").mouseout(function(){ 
 
     $(".over span").text(x += 1); 
 
    });  
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="over" style="background-color:lightgray;padding:20px;width:250px;float:left"> 
 
    <h3 style="background-color:white;">Mouseout event triggered: <span></span></h3> 
 
</div>

当鼠标进入h3的mouseout上div.over被触发。为什么？

编辑：请注明权威的参考来备份你的要求。

Answer 1

因为你的div包含容器的孩子，你“鼠标移开”一旦你“鼠标悬停”孩子们，这是由设计。因为它在它自己的可见空间之外，并且在它的儿童的可见空间内。由于孩子也在父母身边，因此它“继承”了该事件，因为它被视为一个单独的卷，但仍在父母的空间内。这就是为什么当你对孩子进行“鼠标悬停”时触发事件。这被称为“冒泡”的事件气泡元素的家庭树。

由于马希指出的那样，如果你用“鼠标离开”一旦离开附加元件的面积也只会触发。

的MDN文档解释这里的区别： https://developer.mozilla.org/en-US/docs/Web/Events/mouseleave

但权威答案在W3C DOM规范最佳效果：

它必须被分派时从一个元素的指针设备移动到它的一个后代元素的界限。

因此，它明确指出，当您移动到其中一个子元素时，必须触发事件mouseout。因此，对于为什么发生这种情况的原因是由设计，通过规范：

https://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseout

我添加了一个样本，以示区别

x = 0; 
 
$(document).ready(function(){ 
 
    $("div.over").mouseout(function(e){ 
 
     $(".over span").text(x += 1); 
 
     console.log(e.target); 
 
    });  
 
    $("div.over > h3").mouseover(function(){ 
 
     $(".over > h3").css("color", "red"); 
 
    }).mouseout(function(){ 
 
     $(".over > h3").css("color","black"); 
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="over" style="background-color:lightgray;padding:20px;width:250px;float:left"> 
 
    <h3 style="background-color:white;">Mouseout event triggered: <span></span></h3> 
 
</div>

x = 0; 
 
$(document).ready(function(){ 
 
    $("div.over").mouseleave(function(){ 
 
     $(".over span").text(x += 1); 
 
    });  
 
    $("div.over > h3").mouseover(function(){ 
 
     $(".over > h3").css("color", "red"); 
 
    }).mouseout(function(){ 
 
     $(".over > h3").css("color","black"); 
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="over" style="background-color:lightgray;padding:20px;width:250px;float:left"> 
 
    <h3 style="background-color:white;">Mouseout event triggered: <span></span></h3> 
 
</div>

现在，如果你在“Z空间”向下移动的子元素，它不再影响mouseout事件：

x = 0; 
 
$(document).ready(function(){ 
 
    $("div.over").mouseout(function(){ 
 
     $(".over").css("background","red"); 
 
    }); 
 
    $("div.over").mouseover(function(){ 
 
     $(".over").css("background","#444"); 
 
    });  
 
    $("div.over > h3").css("display", "block"); 
 
    $("div.over > h3").css("position", "relative"); 
 
    $("div.over > h3").css("z-index", -1000); 
 
    $("div.over > h3").mouseover(function(){ 
 
     $(".over > h3").css("color", "red"); 
 
    }).mouseout(function(){ 
 
     $(".over > h3").css("color","black"); 
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="over" style="background-color:lightgray;padding:20px;width:250px;float:left"> 
 
    <h3 style="background-color:white;">Mouseout event triggered: <span></span></h3> 
 
</div>

Answer 2

mouseout当鼠标指针离开任何子元素以及所选元素时触发事件。

mouseleave仅当鼠标指针离开所选元素时触发事件。