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

Question

mouseout事件from MDN的定义如下：

The mouseout event is fired when a pointing device (usually a mouse) is moved off the element that has the listener attached or off one of its children.

因此，如果我有一个容器 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 时，触发 div.over 上的 mouseout。为什么？

编辑： 请提供权威参考来支持您的声明。

Answer 1

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

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

Answer 2

由于您的 div 包含 children，您 "mouseout" 的容器一旦您 "mouseover" children，这是设计使然。因为它在它自己可见的 space 之外，而在它的内部 child 可见 space。由于 child 也在 parent 内，它 "inherits" 事件，因为它被视为一个单独的卷，但仍在 [=67= 的 space 内].这就是为什么当你 "mouseout" 的 child 时触发事件的原因。这被称为 "bubbling" 事件在元素的家谱中冒泡。

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

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

不过权威答案最好看W3CDOM规范：

it MUST be dispatched when the pointer device moves from an element onto the boundaries of one of its descendent elements.

所以它明确指出当您移动到 child 元素之一时必须触发事件 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" 中向下移动 child 元素，它不再影响 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>

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

Why is mouseout fired when mousein is performed on a child element?

html

javascript

jquery

mouseevent

jquery-events