In this article, we’ll learn multiple ways to easily simulate a mouse click or tap on an element in the HTML DOM, using JavaScript.
Use click() method
This is the easiest and most basic method to simulate a mouse click on an element. Every HTMLElement has a click() method that can be used to simulate clicks on it. It fires the click event on the element when it is called. The click event bubbles up to elements higher in the document tree and fires their click events.
const target = document.querySelector('#target');
target.click();To use the click() method, you first need to select the element in JavaScript, using a method like querySelector() or getElementById(). You’ll be able to access the HTMLElement object from the method’s return value, and call the click() method on it to simulate the click.
Let’s see an example, where we simulate a button click every second, by calling click() in setInterval().
const target = document.querySelector('#target');
let clickCount = 0;
const clickCountEl = document.getElementById('click-count');
clickCountEl.innerText = clickCount;
// Programmatically click button every 1 second
setInterval(() => {
target.click();
clickCount++;
clickCountEl.innerText = clickCount;
}, 1000);
<button id="target">Target</button>
<br /><br />
Clicks: <span id="click-count"></span>Result
Notice how there are no visual indicators of a click occurring because it’s a programmatic click.
Since click() causes the click event to fire on the element, any click event listeners you attach to the element will be invoked from a click() call.
In the following example, we use a click event listener (instead of setInterval) to increase the click count, and another listener to toggle the button’s style when clicked.
const target = document.querySelector('#target');
let clickCount = 0;
const clickCountEl = document.getElementById('click-count');
clickCountEl.innerText = clickCount;
target.addEventListener('click', () => {
clickCount++;
clickCountEl.innerText = clickCount;
});
target.addEventListener('click', () => {
target.classList.toggle('btn-style');
});
setInterval(() => {
target.click();
}, 1000);
<button id="target">Target</button>
<br /><br />
Count: <span id="click-count"></span>.btn-style {
color: white;
background-color: blue;
border-radius: 2px;
}
Simulate mouse click with MouseEvent object
Alternatively, we can use a custom MouseEvent object to simulate a mouse click in JavaScript.
const targetButton = document.getElementById('target');
const clickEvent = new MouseEvent('click');
targetButton.dispatchEvent(clickEvent);The MouseEvent interface represents events that occur from the user interacting with a pointing device like the mouse. It can represent common events like click, dblclick, mouseup, and mousedown.
After selecting the HTMLElement and creating a MouseEvent, we call the dispatchEvent() method on the element to fire the event on the element.
For example:
const clickEvent = new MouseEvent('click');
const targetButton = document.getElementById('target');
let clickCount = 0;
const clickCountEl = document.getElementById('click-count');
clickCountEl.innerText = clickCount;
targetButton.addEventListener('click', () => {
clickCount++;
clickCountEl.innerText = clickCount;
});
setInterval(() => {
const clickEvent = new MouseEvent('click');
targetButton.dispatchEvent(clickEvent);
}, 1000);
<button id="target">Target</button>
<br /><br />
Clicks: <span id="click-count"></span>MouseEvent.Any click event listener attached to the element is called with the MouseEvent object that was passed to dispatchEvent().
const clickEvent = new MouseEvent('click');
const targetButton = document.getElementById('target');
targetButton.addEventListener('click', (event) => {
console.log(clickEvent === event); // true
});
targetButton.addEventListener('click', (event) => {
console.log(clickEvent === event); // true
});
targetButton.dispatchEvent(clickEvent);
Result
MouseEvent is passed to click listeners.Apart from the event type passed as the first argument, we can pass options to the MouseEvent() constructor to control specific details about the event:
const targetButton = document.getElementById('target');
const clickEvent = new MouseEvent('click', {
bubbles: true,
cancelable: false,
view: window
});
targetButton.dispatchEvent(clickEvent);The bubbles property determines whether the event can bubble up the DOM tree to the element’s containing elements.
The cancelable property determines whether or not the event’s default action can be prevented.
The view property sets the event’s AbstractView. You should pass the window object here.
Find more options in the MDN documentation for the MouseEvent() constructor and the now deprecated MouseEvent.initMouseEvent() method.
Simulate mouse click at position
We can also simulate a mouse click on an element at a specific position on the visible part of the webpage.
We do this by selecting the element with the document.elementFromPoint() method, and then simulating the click with the click() method.
const targetButton = document.elementFromPoint(x, y).click();
targetButton.click();
The elementFromPoint() method returns the topmost element at the specified coordinates, relative to the browser’s viewport. It returns an HTMLElement, which we call click() on to simulate the mouse click from JavaScript.
In the following example, we have a button and a containing div:
<div id="container">
<button id="target">Target</button>
<br /><br />
Count: <span id="click-count"></span>
</div>Using CSS, we position the #container div to make its top-left corner exactly at the position (200, 100) in the viewport.
#container {
position: absolute;
top: 100px;
left: 200px;
height: 100px;
width: 100px;
border: 1px solid black;
}The #target button is at point (0, 0) in its #container, so point (200, 100) in the viewport.
To get the position of the #target with more certainty, we add an offset of 10px each to get the final position to search for: (210, 110).
let clickCount = 0;
const clickCountEl = document.getElementById('click-count');
clickCountEl.innerText = clickCount;
const targetButton = document.getElementById('target');
targetButton.addEventListener('click', () => {
clickCount++;
clickCountEl.innerText = clickCount;
});
// Offset of 10px to get button's position in container
const x = 200 + 10;
const y = 100 + 10;
setInterval(() => {
const buttonAtPoint = document.elementFromPoint(x, y);
buttonAtPoint.click();
}, 1000);
To verify that we’re actually selected the button by its position and it’s getting clicks, we select it by its ID (target) and set a click event listener on the HTMLElement returned, which will increase the count of how many times it has been clicked.
And we’re successful:
(210, 110).Simulate mouse click at position with MouseEvent object
We can also simulate a mouse click on an element at a certain (x, y) position using a MouseEvent object and the dispatchEvent() method.
Here’s how:
const clickEvent = new MouseEvent('click', {
view: window,
screenX: x,
screenY: y,
});
const elementAtPoint = document.elementFromPoint(x, y);
elementAtPoint.dispatchEvent(clickEvent);
This time we specify the screenX and screenY options when creating the MouseEvent.
screenX sets the position where the click event should occur on the x-axis. It sets the value of the MouseEvent‘s screenX property.
screenY sets the position where the click event should occur on the Y-axis. It sets the value of the MouseEvent‘s screenY property.
So we can use MouseEvent to replace the click() method in our last example:
// ...
// Offset of 10px to get button's position in container
const x = 200 + 10;
const y = 100 + 10;
setInterval(() => {
const buttonAtPoint = document.elementFromPoint(x, y);
const clickEvent = new MouseEvent('click', {
view: window,
screenX: x,
screenY: y,
});
buttonAtPoint.dispatchEvent(clickEvent);
}, 1000);Note: screenX and screenY doesn’t decide where the click should occur (elementFromPoint does). These options are set so that they can be accessed from any click event listener attached to the element at the point.
Every Crazy Thing JavaScript Does
A captivating guide to the subtle caveats and lesser-known parts of JavaScript.
