Thuộc tính relatedTarget của MouseEvent trong HTML DOM

Giới thiệu

Thuộc tính relatedTarget của MouseEvent trong HTML DOM trả về phần tử tương ứng đã kích hoạt sự kiện mouseover hoặc mouseout tương ứng.

Cú pháp

Lấy relatedTarget:

MouseEventObject.relatedTarget

Ví dụ

Ví dụ sử dụng onmouseout trên container để phát hiện phần tử nào đang được hover khi rời khỏi container.

<!DOCTYPE html> <html> <head> <title>MouseEvent relatedTarget</title> <style> 
  * { padding: 2px; margin:5px; } 
  form { width:70%; margin: 0 auto; text-align: center; } 
  #outer { width:70%; margin: 0 auto; padding: 0; text-align: center; border:1px solid black; height: 105px; background-color: #28a745; } 
  input[type="button"] { border-radius: 10px; } 
  #upper { border-bottom: 1px solid black; height: 40px; margin: 0 0 15px 0; background-color: #DC3545; } 
  #lower { border-top: 1px solid black; height: 40px; margin: 15px 0 0 0; background-color: #DC3545; } 
</style> </head> <body> 
  <form> 
    <fieldset> 
      <legend>MouseEvent-relatedTarget</legend> 
      <div id="outer" onmouseout="gameStart(event)"> 
        <div id="upper"><h2>Danger</h2></div> 
        <div id="lower"><h2>Danger</h2></div> 
      </div> 
      <div id="divDisplay"></div> 
    </fieldset> 
  </form> 
  <script> 
    var divDisplay = document.getElementById("divDisplay"); 
    function gameStart(event) { 
      var fetchedID = event.relatedTarget.id; 
      if(fetchedID !== '') 
        divDisplay.textContent = 'You are hovering over ' + fetchedID + ' <div> element'; 
    } 
  </script> </body> </html>

Kết quả

Hover vùng xanh (an toàn):

Hover vùng đỏ trên (nguy hiểm):

Hover vùng đỏ dưới (nguy hiểm):