Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> HTML

एचटीएमएल डोम माउसइवेंट स्क्रीनएक्स संपत्ति

<घंटा/>

एचटीएमएल डोम माउसइवेंट स्क्रीनएक्स प्रॉपर्टी माउस पॉइंटर के क्षैतिज (x) निर्देशांक को उपयोगकर्ता स्क्रीन डिस्प्ले के सापेक्ष लौटाती है यदि माउस इवेंट ट्रिगर किया गया था। लंबवत निर्देशांक प्राप्त करने के लिए स्क्रीनवाई के साथ प्रयोग करें।

निम्नलिखित वाक्य रचना है -

स्क्रीनएक्स ऑब्जेक्ट . का संदर्भ लौटाना

MouseEventObject.screenX

आइए एक उदाहरण देखें MouseEvent ScreenX संपत्ति -

उदाहरण

<!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>

आउटपुट

'प्रारंभ करें' . क्लिक करने के बाद हरे (सुरक्षित) क्षेत्र में बटन और कर्सर -

एचटीएमएल डोम माउसइवेंट स्क्रीनएक्स संपत्ति

‘शुरू करें’ . क्लिक करने के बाद हरे (सुरक्षित) क्षेत्र के अंत में बटन और कर्सर -

एचटीएमएल डोम माउसइवेंट स्क्रीनएक्स संपत्ति

‘शुरू करें’ . क्लिक करने के बाद लाल (खतरे) क्षेत्र में बटन और कर्सर -

एचटीएमएल डोम माउसइवेंट स्क्रीनएक्स संपत्ति


  1. एचटीएमएल डोम माउसइवेंट ऑफसेटवाई संपत्ति

    यदि माउस ईवेंट ट्रिगर किया गया था, तो HTML DOM माउसइवेंट ऑफसेटवाई संपत्ति लक्ष्य तत्व के सापेक्ष माउस पॉइंटर के लंबवत (y) निर्देशांक लौटाती है। क्षैतिज निर्देशांक प्राप्त करने के लिए ऑफसेटएक्स के साथ प्रयोग करें। निम्नलिखित वाक्य रचना है - offsetY . के संदर्भ में वापसी वस्तु MouseEventObject.offs

  1. एचटीएमएल डोम माउसइवेंट ऑफसेटएक्स संपत्ति

    यदि माउस ईवेंट ट्रिगर किया गया था, तो HTML DO माउसइवेंट ऑफ़सेटएक्स संपत्ति लक्ष्य तत्व के सापेक्ष माउस पॉइंटर के क्षैतिज (x) निर्देशांक को लौटाती है। लंबवत निर्देशांक प्राप्त करने के लिए ऑफ़सेटवाई के साथ भी प्रयोग करें। निम्नलिखित वाक्य रचना है - offsetX . का वापस संदर्भ वस्तु MouseEventObject.of

  1. एचटीएमएल डोम माउसइवेंट क्लाइंटवाई संपत्ति

    यदि माउस ईवेंट ट्रिगर किया गया था, तो HTML DOM माउसइवेंट क्लाइंटवाई प्रॉपर्टी माउस पॉइंटर का वर्टिकल (y) निर्देशांक लौटाती है। क्षैतिज निर्देशांक प्राप्त करने के लिए क्लाइंटएक्स के साथ प्रयोग करें। निम्नलिखित वाक्य रचना है - क्लाइंटवाई . का संदर्भ लौटाना वस्तु MouseEventObject.clientY आइए माउसइव