Đối tượng MouseEvent trong HTML DOM

Giới thiệu

HTML DOM MouseEvent Object đại diện cho một sự kiện xảy ra khi người dùng tương tác với chuột trên các phần tử tài liệu HTML.

Các thuộc tính và phương thức chính

Các sự kiện chuột (Mouse Events)

Ví dụ 1: clientX/clientY (Game di chuột)

Tương tự ví dụ ở bài clientX property.

Ví dụ 2: relatedTarget (onmouseout)

Ví dụ hiển thị ID của phần tử đang được hover khi rời khỏi container.

<!DOCTYPE html> <html> <head> <title>MouseEvent onmouseout</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-onmouseout</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):