为什么在对子元素执行mousein时会触发mouseout？

Question

来自MDN的mouseout事件定义如下:

当指针设备(通常是鼠标)移出已连接或关闭其中一个子节点的元素时,会触发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了mouseouton div.over.为什么？

编辑:请提及权威参考以备份您的声明.

Answer 1

由于您的div包含子项,因此一旦您"鼠标悬停"子项,您就可以"抓出"容器,这是设计的.因为它在它自己的可见空间之外,并且在它的孩子的可见空间内.由于子节点也在父节点内,因此它"继承"该事件,因为它被视为一个单独的卷,但仍在父节点的空间内.这就是当您"抓出"孩子时触发事件的原因.这被称为"冒泡"事件冒泡元素的家谱.

正如Mahi所指出的,如果你使用"mouseleave",它只会在它离开附加元素的区域时触发.

MDN文档解释了这里的不同之处:https: //developer.mozilla.org/en-US/docs/Web/Events/mouseleave

但权威的答案最好在W3C DOM规范中查看:

当指针设备从一个元素移动到其一个后代元素的边界上时,必须调度它.

所以它清楚地说明当你移动ONTO其中一个子元素时必须触发事件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-space"中向下移动子元素,它将不再影响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事件仅在鼠标指针离开所选元素时触发。