Thuộc tính HTML DOM MouseEvent pageX trả về tọa độ ngang (x) của con trỏ chuột so với tài liệu nếu sự kiện chuột được kích hoạt. Sử dụng với pageY để lấy tọa độ dọc.
Sau đây là cú pháp -
Trả lại tham chiếu cho pageX đối tượng
MouseEventObject.pageX
Hãy để chúng tôi xem một ví dụ về MouseEvent pageX tài sản -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>MouseEvent pageX</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-pageX</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) -
