Thuộc tính HTML DOM MouseEvent pageY trả về tọa độ dọc (y) của con trỏ chuột so với tài liệu nếu một sự kiện chuột được kích hoạt. Sử dụng với pageX để lấy tọa độ ngang.
Sau đây là cú pháp -
Trả lại tham chiếu cho trangY đối tượng
MouseEventObject.pageY
Hãy để chúng tôi xem một ví dụ về trang MouseEventY tài sản -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>MouseEvent pageY</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-pageY</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.pageX;
var y = event.pageY;
if(y > 95 && y < 110){
divDisplay.textContent = 'Keep Going!';
if(x === 439){
divDisplay.textContent = 'Congrats! You Did it!';
gameDisplay.removeEventListener('mousemove', playGame);
}
}
else{
divDisplay.textContent = 'You moved to DANGER area. You loose!';
gameDisplay.removeEventListener('mousemove', playGame);
}
}
function gameStart(){
gameDisplay.addEventListener('mousemove',playGame);
}
</script>
</body>
</html> Đầu ra
Sau khi nhấp vào ‘ Bắt đầu Nút và con trỏ trong vùng màu xanh lục (an toàn) -
Sau khi nhấp vào ‘ Bắt đầu Nút và con trỏ ở cuối vùng màu xanh lục (an toàn) -
Sau khi nhấp vào ‘ Bắt đầu Nút và con trỏ trong khu vực màu đỏ (nguy hiểm) -
