परिचय
HTML DOM MouseEvent clientX प्रॉपर्टी माउस पॉइंटर का क्षैतिज (x) निर्देशांक लौटाती है यदि कोई माउस इवेंट ट्रिगर हुआ हो। वर्टिकल निर्देशांक प्राप्त करने के लिए clientY के साथ उपयोग करें।
सिंटैक्स
clientX ऑब्जेक्ट का रेफरेंस वापस करना:
MouseEventObject.clientX
उदाहरण
<!DOCTYPE html>
<html>
<head>
<title>MouseEvent clientX</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-clientX</legend>
<div id="outer">
<div id="upper"><h2>खतरा</h2></div>
<div id="lower"><h2>खतरा</h2></div>
</div>
<input type="button" id="start" value="शुरू करें" 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.clientX;
var y = event.clientY;
if(y > 95 && y < 110) {
divDisplay.textContent = 'चलते रहें!';
if(x === 439) {
divDisplay.textContent = 'बधाई! आपने कर दिखाया!';
gameDisplay.removeEventListener('mousemove', playGame);
}
} else {
divDisplay.textContent = 'आप खतरे के क्षेत्र में चले गए। आप हार गए!';
gameDisplay.removeEventListener('mousemove', playGame);
}
}
function gameStart() {
gameDisplay.addEventListener('mousemove', playGame);
}
</script>
</body>
</html>
आउटपुट
'शुरू करें' बटन पर क्लिक करने के बाद और कर्सर हरे (सुरक्षित) क्षेत्र में:
'शुरू करें' बटन पर क्लिक करने के बाद और कर्सर हरे (सुरक्षित) क्षेत्र के अंत में:
'शुरू करें' बटन पर क्लिक करने के बाद और कर्सर लाल (खतरे) क्षेत्र में:
