jQuery event.relatedTarget

admin發表於2017-02-20
jQuery
此屬性可以返回事件中涉及到的其他DOM元素。

（1）.對於mouseout事件將會返回移入的元素。

（2）.對於mouseenter事件將會返回離開的元素。

語法結構:

[JavaScript] 純文字檢視 複製程式碼
event.relatedTarget

jQuery1.1.4版本新增。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
#wrapper { 
  width:300px;
  height:300px;
  background-color:red;
  margin:0px auto;
} 
#inner{
  width:100px;
  height:100px;
  background-color:green;
  margin:0px auto;
}
</style> 
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("#wrapper").mouseout(function(){
    $(event.relatedTarget).css("background-color","blue");
  })  
})
</script> 
</head> 
<body> 
<div id="wrapper"> 
  <div id="inner"></div> 
</div> 
</body> 
</html>

當滑鼠從此元素中離開時，必然會移入另一個元素中，那麼event.relatedTarget屬性會返回移入的那個DOM元素，於是就可以將移入的元素背景顏色設定為藍色。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
#wrapper { 
  width:300px;
  height:300px;
  background-color:red;
  margin:0px auto;
} 
#inner{
  width:100px;
  height:100px;
  background-color:green;
  margin:0px auto;
}
</style> 
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script> 
$(document).ready(function(){
  $("#inner").mouseenter(function(){
    $(event.relatedTarget).css("background-color","blue");
  })  
})
</script> 
</head> 
<body> 
<div id="wrapper"> 
  <div id="inner"></div> 
</div> 
</body> 
</html>

當滑鼠指標移入此元素時，必然是滑鼠指標從其他元素移出再移入此元素的，那麼event.relatedTarget屬性會返回移出那個DOM元素，於是上面程式碼就可以將移出的元素背景顏色設定為藍色。

相關文章