यदि माउस ईवेंट ट्रिगर किया गया था, तो HTML DOM माउसइवेंट ऑफसेटवाई संपत्ति लक्ष्य तत्व के सापेक्ष माउस पॉइंटर के लंबवत (y) निर्देशांक लौटाती है। क्षैतिज निर्देशांक प्राप्त करने के लिए ऑफसेटएक्स के साथ प्रयोग करें।
निम्नलिखित वाक्य रचना है -
offsetY . के संदर्भ में वापसी वस्तु
MouseEventObject.offsetY
आइए एक उदाहरण देखेंमाउसइवेंट ऑफसेटवाई संपत्ति -
उदाहरण
<!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> आउटपुट
'प्रारंभ करें' . क्लिक करने के बाद हरे (सुरक्षित) क्षेत्र में बटन और कर्सर -
'प्रारंभ करें . पर क्लिक करने के बाद हरे (सुरक्षित) क्षेत्र के अंत में बटन और कर्सर -
'प्रारंभ करें . पर क्लिक करने के बाद ' बटन और कर्सर लाल (खतरे वाले) क्षेत्र में -
