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