HTML DOM MouseEvent Object



The HTML DOM MouseEvent Object represents an event which incurs on interaction of mouse with the HTML document elements.

Here, “MouseEvent” can have the following properties and methods −

Property/Method
Description
altKey
Itreturns whether the "ALT" key on keyboard was pressedwhen the mouse event was triggered
button
Itreturns a number corresponding to which mouse button was pressedwhen the mouse event was triggered
buttons
Itreturns which mouse buttons were pressed when the mouse event wastriggered
clientX
Itreturns the horizontal (x) coordinate of the mouse pointer,relative to the current window, when the mouse event was triggered
clientY
Itreturns the vertical (y) coordinate of the mouse pointer, relativeto the current window, when the mouse event was triggered
ctrlKey
Itreturns whether the "CTRL" key was pressed on keyboardwhen the mouse event was triggered
getModifierState()
Itreturns true if the specified key is activated and false if not
metaKey
Itreturns whether the "META" key was pressed on keyboardwhen an event was triggered
movementX
Itreturns the horizontal (x) coordinate of the mouse pointerrelative to the position of the last mousemove event
movementY
Itreturns the vertical (y) coordinate of the mouse pointer relativeto the position of the last mousemove event
offsetX
Itreturns the horizontal (x) coordinate of the mouse pointerrelative to the position of the edge of the target element
offsetY
Itreturns the vertical (y) coordinate of the mouse pointer relativeto the position of the edge of the target element
pageX
Itreturns the horizontal (x) coordinate of the mouse pointer,relative to the document, when the mouse event was triggered
pageY
Itreturns the vertical (y) coordinate of the mouse pointer, relativeto the document, when the mouse event was triggered
relatedTarget
Itreturns the HTML element that triggered the mouse event
screenX
Itreturns the horizontal (x) coordinate of the mouse pointer,relative to the screen, when an event was triggered
screenY
Itreturns the vertical (y) coordinate of the mouse pointer, relativeto the screen, when an event was triggered
shiftKey
Itreturns whether the "SHIFT" key was pressed on keyboardwhen an event was triggered
which
Itreturns which mouse button was pressed when the mouse event wastriggered

Let us see an example of MouseEvent clientX property −

Example

 Live Demo

<!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>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.clientX;
      var y = event.clientY;
         if(y > 95 &amp;&amp; y < 110){
            divDisplay.textContent = 'Keep Going!';
               if(x === 439){
                  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>

Output

After clicking ‘Start’ button and cursor in green (safe) area −

After clicking ‘Start’ button and cursor at end of green (safe) area −

After clicking ‘Start’ button and cursor in red (danger) area −

Also, “MouseEvent” can have the following events −

Event
Description
onclick
Theevent occurs when the user clicks on an element
oncontextmenu
Theevent occurs when the user right-clicks on an element to open acontext menu
ondblclick
Theevent occurs when the user double-clicks on an element
onmousedown
Theevent occurs when the user presses a mouse button over an element
onmouseenter
Theevent occurs when the pointer is moved onto an element
onmouseleave
Theevent occurs when the pointer is moved out of an element
onmousemove
Theevent occurs when the pointer is moving while it is over anelement
onmouseout
Theevent occurs when a user moves the mouse pointer out of anelement, or out of one of its children
onmouseover
Theevent occurs when the pointer is moved onto an element, or ontoone of its children
onmouseup
Theevent occurs when a user releases a mouse button over an element

Let us see an example of MouseEvent onmouseout event −

Example

 Live Demo

<!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>Danger</h2></div>
         <div id="lower"><h2>Danger</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 = 'You are hovering over '+fetchedID+' <div> element';
         }
</script>
</body>
</html>

Output

Hovering over green (safe) area −

Hovering over upper red (danger) area −

Hovering over lower red (danger) area −


Advertisements