Question

mouseout事件from MDN的定义如下：

当指针设备（通常是鼠标）移出已连接或关闭其中一个子节点的元素时，会触发mouseout事件。

因此，如果我有一个附加mouseout的容器div，那么我希望如果鼠标从任何一个子节点移出，就会触发该事件。但我所看到的是，即使然后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包含了孩子，你可以使用＃mouse;＆＃34; mouseout＆＃34;一旦你＆＃34; mouseover＆＃34;孩子们，这是设计的。因为它在它自己的可见空间之外，并且在它的孩子的可见空间之内。由于孩子也在父母的内部，因此它继承了＃34;事件，因为它被视为一个单独的卷，但仍然在父级的空间内。这就是为什么当你＆＃34; mouseout＆＃34;孩子这被称为＆＃34;冒泡＆＃34;事件冒泡了元素的家谱。

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

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

我添加了一个样本来显示差异

＆＃13;

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");
    });
    
});

＆＃13;

<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>

＆＃13;

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");
    });
    
});

＆＃13;

<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>

＆＃13;

现在，如果你将子元素向下移动到＆＃34; z-space＆＃34;它不再影响mouseout事件：

＆＃13;

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");
    });
    
});

＆＃13;

<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>

＆＃13;

Answer 2

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

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

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

2 个答案: