Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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
<!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 && 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
<!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 −
Updated on: 25-Oct-2019
347 Views
Advertisements
To Continue Learning Please Login