Thuộc tính HTML DOM MouseEvent offsetY trả về tọa độ dọc (y) của con trỏ chuột so với phần tử mục tiêu nếu một sự kiện chuột được kích hoạt. Sử dụng với offsetX để lấy tọa độ ngang.
Sau đây là cú pháp -
Trả lại tham chiếu cho offsetY đối tượng
MouseEventObject.offsetY
Hãy để chúng tôi xem một ví dụ về MouseEvent offsetY tài sản -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>MouseEvent offsetY</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-offsetY</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.offsetX;
var y = event.offsetY;
if(y > 45 && y < 60){
divDisplay.textContent = 'Keep Going!';
if(x === 272){
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) -
