HTML DOM MouseEvent ऑब्जेक्ट

परिचय

HTML DOM MouseEvent Object HTML डॉक्यूमेंट एलिमेंट्स के साथ माउस के इंटरैक्शन पर होने वाले इवेंट को दर्शाता है।

प्रॉपर्टीज और मेथड्स

उदाहरण - MouseEvent 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>

आउटपुट

'शुरू करें' बटन पर क्लिक करने के बाद और कर्सर हरे (सुरक्षित) क्षेत्र में:

'शुरू करें' बटन पर क्लिक करने के बाद और कर्सर हरे (सुरक्षित) क्षेत्र के अंत में:

'शुरू करें' बटन पर क्लिक करने के बाद और कर्सर लाल (खतरे) क्षेत्र में:

MouseEvent इवेंट्स

उदाहरण - MouseEvent onmouseout इवेंट

<!DOCTYPE html>
<html>
<head>
<title>MouseEvent onmouseout</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-onmouseout</legend>
      <div id="outer" onmouseout="gameStart(event)">
        <div id="upper"><h2>खतरा</h2></div>
        <div id="lower"><h2>खतरा</h2></div>
      </div>
      <div id="divDisplay"></div>
    </fieldset>
  </form>
  <script>
    var divDisplay = document.getElementById("divDisplay");
    var textSelect = document.getElementById("textSelect");
    function gameStart(event) {
      var fetchedID = event.relatedTarget.id;
      if(fetchedID !== '') {
        divDisplay.textContent = 'आप ' + fetchedID + ' <div> एलिमेंट पर होवर कर रहे हैं';
      }
    }
  </script>
</body>
</html>

आउटपुट

हरे (सुरक्षित) क्षेत्र पर होवर करने पर:

ऊपरी लाल (खतरे) क्षेत्र पर होवर करने पर:

निचले लाल (खतरे) क्षेत्र पर होवर करने पर: