mouseout與mouseleave區別

admin發表於2019-02-21

通常來講，一個概念的名稱大致能夠體現它的功能。

標題中的兩個事件也是如此，從名稱來看，都是滑鼠指標從指定元素離開觸發事件。

筆者本人英語水平有限，很難從out與leave單詞含義之間的區別來闡述兩個事件之間差別。

但是，對於兩個事件之間的具體差別還是有比較清晰的瞭解，下面簡單進行一下分享。

關於兩個事件各自具體用法可以參閱如下兩篇文章：

（1）.JavaScript mouseout 事件一章節。

（2）.JavaScript mouseleave 事件一章節。

首先總結一下兩個事件之間的區別，後面再通過程式碼例項進行一下演示。

（1）.mouseout支援事件冒泡，mouseleave不支援。

（2）.事件冒泡的支援與否，又決定滑鼠從子元素移出時觸發mouseout事件，不觸發mouseleave事件。

（3）.滑鼠指標從當前元素移入子元素時，觸發mouseout事件，但是不觸發mouseleave事件。

簡單總結如下：

（1）.如果在A元素註冊mouseleave事件，那麼必須滑鼠指標完全移出A元素事件才會觸發。

（2）.如果在A元素註冊mouseout事件，不但滑鼠指標完全移出A元素會觸發事件，滑鼠指標從A元素移入它的子元素和滑鼠指標從子元素移入A元素也會觸發事件。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
div{
    width:150px;
    height:60px;
    line-height:60px;
    text-align: center;
    background-color: #ccc;
    margin:10px
}
</style>
<script>
window.onload=function(){
    let top=document.querySelector("#top");
    let bottom=document.querySelector("#bottom");
    top.onmouseout=function(){
        this.innerHTML="螞蟻部落一";
    }
    bottom.onmouseleave=function(){
        this.innerHTML="螞蟻部落二";
    }

}
</script>  
</head>
<body> 
  <div id="top"></div>
  <div id="bottom"></div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201902/21/142324ddd20doz005av5dd.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼分別為兩個div註冊mouseout和mouseleave事件處理函式。

當滑鼠指標從各自元素離開時，會將對應的字串寫入div，此時兩者的表現完全一樣。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#top,#bottom{
    width:150px;
    height:60px;
    line-height:60px;
    text-align: center;
    background-color: #ccc;
    margin:10px;
    position: relative;
}
#top div,#bottom div{
    width:100px;
    height:50px;
    text-align:center;
    line-height:50px;
    position: relative;
    left:150px;
    color:white;
    background-color:blue;
}
</style>
<script>
window.onload=function(){
    let top=document.querySelector("#top");
    let bottom=document.querySelector("#bottom");
    top.onmouseout=function(){
        this.firstElementChild.innerHTML="螞蟻部落一";
    }
    bottom.onmouseleave=function(){
        this.firstElementChild.innerHTML="螞蟻部落二";
    }

}
</script>  
</head>
<body> 
  <div id="top">
      <div></div>
  </div>
  <div id="bottom">
    <div></div>
  </div>
</body>
</html>

執行程式碼後，初始效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201902/21/142349jjwgni8i8j85ajy1.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.為了便於觀察效果，將各自子元素通過定位方式定位到父元素外邊。

（2）.雖然子元素視覺上在父元素之外，但並不等於父子關係受到影響。

（3）.首先看mouseout事件，當滑鼠指標從藍色子元素向左移動至top元素，事件觸發，由於此事件支援冒泡現象，滑鼠離開子元素這個事件會傳遞至父元素，所以會將"螞蟻部落一"寫入子元素中；當滑鼠指標從top父元素移動至藍色子元素的時候，事件也會觸發。

（4）.再來看mouseleave事件，當滑鼠指標從藍色子元素向左移動至bottom父元素，事件處理函式不會執行，由於此事件不支援冒泡現象；當滑鼠指標從bottom父元素移動至藍色子元素的時候，事件不會觸發，只有滑鼠指標徹底移出bottom父元素，事件才會觸發。

上面對兩個事件的區別進行比較詳細的介紹，如果有任何疑問可以在文章底部進行留言反饋交流。

相關文章