JavaScript mouseenter 事件

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

當滑鼠指標進入指定元素時觸發mouseenter事件。

需要說明一點，不一定非得是滑鼠裝置，也可能是其他裝置，最為常見的當然是滑鼠。

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

此事件的功能從它的名稱也可以猜測出來，它的名稱有兩個單詞構成，分別如下：

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

（2）.enter：翻譯成漢語具有"進入"的意思。

mouseenter事件與mouseover事件非常類似，當然區別也是很明顯的，本文不做過多介紹。

關於兩個事件的區別可以參閱mouseenter事件與mouseover事件區別一章節。

此事件雖然簡單，但具有一些特點需要特別注意，主要特點如下：

（1）.此事件不具有事件冒泡現象，也就是子元素的事件不會通過冒泡方式傳達到父元素。

（2）.滑鼠指標從子元素移動到父元素，此事件不會觸發。

瀏覽器支援：

（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>
#ant{
  width:200px;
  height:100px;
  background-color:#ccc;
}
</style>
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  odiv.onmouseenter=function(){
    this.style.backgroundColor="green";
  }
}  
</script>  
</head>
<body>
  <div id="ant"></div>                   
</body>
</html>

上面簡單演示了此事件的基本功能，當滑鼠移入div元素時，mouseenter 事件就會觸發。

於是最後將div元素的背景顏色動態設定為綠色。下面再來介紹一下前面列舉的mouseenter的特點。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style> 
#outer{
  position: relative;
  width: 200px;
  height: 200px;
  margin: 100px;
  background-color:green;
}
#inner{
  position: absolute;
  left: -50px;
  top: 0;
  width: 100px;
  height: 100px;
  background-color:blue;
}       
</style>
<script>
window.onload=function(){
  let outer=document.getElementById("outer");
  outer.onmouseenter = function(ev){
    console.log(ev.target.id)
  }
} 
</script>
</head>
<body>
  <div id="outer">    
    <div id="inner"></div>
  </div>
</body>
</html>

首先對程式碼進行一下簡單分析：

（1）.inner是outer的子元素，通過定位方式將其移出父元素。

（2）.雖然在視覺上子元素脫離父元素，但是在文件樹中，依然是其子元素，有固有從屬關係。

（3）.當滑鼠移入子元素的時候，雖然在視覺上看起來沒有移入父元素，其實已經移入父元素了。

（4）.上述程式碼的能夠列印出事件觸發的源物件，以此證明此事件並沒有冒泡現象。

當滑鼠移入子元素的時候，谷歌開發者工具控制檯會列印出如下結果：

a:3:{s:3:\"pic\";s:43:\"portal/201902/13/194806l0h8ddrah3jajz7j.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

如果如果此事件支援冒泡，那麼列印結果必然是"inner"，由此可以證明此事件不支援冒泡。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style> 
#outer{
  position: relative;
  width: 300px;
  height: 200px;
  margin: 10px;
  background-color:green;
}
#inner{
  position: absolute;
  left: 80px;
  top: 60px;
  width: 100px;
  height: 50px;
  background-color:blue;
}       
</style>
<script>
window.onload=function(){
  let outer=document.getElementById("outer");
  outer.onmouseenter = function(ev){
    console.log(ev.target.id)
  }
} 
</script>
</head>
<body>
  <div id="outer">    
    <div id="inner"></div>
  </div>
</body>
</html>

先說結論，滑鼠指標從子元素移入父元素的時候，mouseenter事件不會觸發。

首先，滑鼠指標移入inner元素，然後在從inner元素移入外層outer元素，不再觸發事件。

這很容易理解，雖然滑鼠指標在子元素，事實上也是出於父元素中，這個事實已經存在。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#ant{
  width:200px;
  height:100px;
  background-color:#ccc;
}
</style>
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  let count=0;
  odiv.onmousemove=function(){
    count=count+1;
    odiv.innerHTML=count;
  }
}  
</script>  
</head>
<body>
  <div id="ant"></div>                   
</body>
</html>

上面是對於mousemove事件的演示，在元素中移動滑鼠指標，事件會不斷觸發。

當然兩個事件的區別十分明顯，最為相似的是mouseover事件，兩者區別本文不再做介紹，可以參閱文章開頭推薦的關於兩個事件區別的文章。

相關文章