JavaScript mouseleave 事件

admin發表於2019-02-21
JavaScript事件

事件名稱是一個合成詞，由如下兩個單詞構成：

（1）.mouse：翻譯成漢語具有"滑鼠"的意思。

（2）.leave：翻譯成漢語具有"離開"的意思。

顧名思義，此事件是在當滑鼠指標離開指定元素的時候觸發，與mouseenter事件對應。

關於如何註冊事件處理函式可以參閱JavaScript 註冊事件處理函式一章節。

與此事件類似的是mouseout事件，從名稱看也是當滑鼠指標離開指定元素觸發。

當然兩個事件是有區別的，本文不做介紹，具體參閱mouseout與mouseleave區別一章節。

首先總結一下此事件的主要特點，最後通過程式碼例項進行演示：

（1）.不支援事件冒泡現象。

（2）.滑鼠指標從子元素移出至當前元素，事件不會觸發，由不支援冒泡現象決定。

（3）.滑鼠指標從當前元素移動至其子元素，事件不會觸發。

（4）.滑鼠指標從當前元素移出，事件觸發。

總結：只有當滑鼠指標完全移出當前元素，事件才會觸發。

瀏覽器支援：

（1）.IE瀏覽器支援此事件。

（2）.edge瀏覽器支援此事件。

（3）.火狐瀏覽器支援此事件。

（4）.Opera瀏覽器支援此事件。

（5）.谷歌瀏覽器支援此事件。

（6）.safria瀏覽器支援此事件。

程式碼例項如下：

[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;
}
</style>
<script>
window.onload=function(){
    let odiv=document.querySelector("div");
    odiv.onmouseleave=function(){
        this.innerHTML="螞蟻部落";
    }
}
</script>  
</head>
<body> 
  <div></div>
</body>
</html>

上述程式碼演示了此事件的基本功能，當滑鼠離開div元素，觸發事件，然後將字串寫入其中。

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

上述程式碼示意圖如下：

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

程式碼分析如下：

（1）.上述程式碼為了演示冒泡現象，兩個div進行父子巢狀。

（2）.關於事件冒泡現象原理可以參閱JavaScript 事件冒泡一章節。

（3）.當滑鼠指標從灰色子div移入到綠色父div中時，事件並沒有觸發，因為並沒有字串的寫入操作。

（4）.這個現象證明了此事件並不支援事件冒泡。

當滑鼠指標從綠色父元素移動到灰色子元素的時候，事件不會觸發，這一點與mouseout事件不同。

總結如下：

此事件觸發的唯一條件就是，滑鼠指標從當前元素完全移出才會觸發。

什麼亂七八糟的，滑鼠指標從子元素移出，從父元素再移動到子元素都不會觸發事件。

根據此事件的主要特點，我們就可以將其應用於更為恰當的場景中，比如僅僅是為了檢測滑鼠指標離開當前元素的相關事件，並不希望受到其他因素的影響，比如由於事件冒泡現象導致滑鼠指標從子元素移出也會觸發事件，mouseleave 事件不支援事件冒泡，所以此干擾就會被排除，類似要求下，與mouseout事件相比，mouseleave 是一個更好的選擇。

相關文章