爲什麼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僅當鼠標指針離開所選元素時觸發事件。