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

Giới thiệu

Thuộc tính screenY của MouseEvent trong HTML DOM trả về tọa độ dọc (y) của con trỏ chuột tương đối với màn hình hiển thị của người dùng khi một sự kiện chuột được kích hoạt. Kết hợp với screenX để lấy tọa độ ngang.

Cú pháp

Lấy giá trị screenY:

MouseEventObject.screenY

Ví dụ

Ví dụ game di chuột sử dụng tọa độ màn hình (screenX/screenY) thay vì viewport.

<!DOCTYPE html> <html> <head> <title>MouseEvent screenY</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-screenY</legend> 
      <div id="outer"> 
        <div id="upper"><h2>Danger</h2></div> 
        <div id="lower"><h2>Danger</h2></div> 
      </div> 
      <input type="button" id="start" value="Start" onclick="gameStart()"> 
      <div id="divDisplay"></div> 
    </fieldset> 
  </form> 
  <script> 
    var divDisplay = document.getElementById('divDisplay'); 
    var gameDisplay = document.getElementById('outer'); 
    function playGame(event) { 
      var x = event.screenX; 
      var y = event.screenY; 
      if(y > 330 && y < 345){ 
        divDisplay.textContent = 'Keep Going!'; 
        if(x === 1171){ 
          divDisplay.textContent = 'Congrats! You Did it!'; 
          gameDisplay.removeEventListener('mousemove', playGame); 
        } 
      } else { 
        divDisplay.textContent = 'You moved to DANGER area. You lose!'; 
        gameDisplay.removeEventListener('mousemove', playGame); 
      } 
    } 
    function gameStart(){ 
      gameDisplay.addEventListener('mousemove', playGame); 
    } 
  </script> </body> </html>

Kết quả

Sau khi nhấn Start và chuột ở vùng xanh:

Chuột ở cuối vùng xanh:

Chuột ở vùng đỏ: