Generally, the Mouse Events is the first thing that beginners learn when they start working with JavaScript. Although, it seems fairly easy but it often gets confusing when handling multiple events.
This simple guide will help you learn about different mouse events that you can track using JS functions along with the sample code and working examples.
There are four main types of mouse events that users can perform. Following are the details about each of them.
Mouse Down / Up
The very first JS event that gets triggered when user pushes down the mouse button is ‘mouse down’. And another event ‘mouse up’ triggers when the mouse button is released after clicking
You can use these two events to animate HTML elements when user interacts with buttons on the webpage.
Below is the sample code to detect mouse down / mouse up events.
`const e = document.getElementById(‘myelement’)
e.addEventListener('mousedown', event => {
console.log(“mouse button down”)
//add your code here
})
e.addEventListener('mousedown', event => {
console.log(“mouse button up”)
//add your code here
})`
Mouse Click / Right Click
Mouse down event is immediately followed by mouse click event exactly at the time when the click is registered. As there two types of click - left and right, you can detect them individually on perform action accordingly. Most common implementations are navigation from one page to other, submitting forms, opening/closing popups etc.
These two events are also using in basic point and click games like cps clicker, cookie clicker etc.
Below is the sample code to detect mouse click / right click events.
const e = document.getElementById(‘myelement’)
e.addEventListener('click', event => {
console.log(“mouse button clicked”)
//add your code here
})
e.addEventListener('rightclick', event => {
console.log(“mouse button clicked”)
//add your code here
})
Mouse Double Click
Using javascript, you can also detect double clicks i.e. when the mouse button is pressed twice consecutively. If you creating UI where user can zoom in/ zoom out, or switch modes etc by double clicking a HTML element, this event is all you need to detect.
To perform any action on double click of a mouse button, you need to use the code below.
Code:
`const e = document.getElementById(‘myelement’)
e.addEventListener('dblclick', event => {
console.log(“mouse double clicked”)
//add your code here
})`
Mouse Over / Mouse Out
Another possible mouse action is moving a mouse over an element or moving it outside from an element. These two actions can be detected using the mouse over and mouse out events using JavaScript. Generally, these two events are used to make HTML elements respond to the user behavior on screen like highlighting call-to-action buttons on hover.
Below is the sample code to detect mouse over and mouse out events.
`const e = document.getElementById(‘myelement’)
e.addEventListener('mouseover', event => {
console.log(“mouse inside element”)
})
e.addEventListener('mouseout', event => {
console.log(“mouse outside element”)
})`
Top comments (0)