Simulate a Mouse Click Using JavaScript

Nowdays simulating process is common between programmers to avoid doing tasks on their owns and it obvious why do they do it by own when they can simulate that process which will work for them whenever they want, program once and use for lifetime :).

You can also simulate the process using JavaScript. In this article, we'll look at how we can simulate a mouse click with JavaScript.

So question arises that how can we simulate it with JavaScript, so basically we are going to use MouseEvent constructor of JavaScript, if you don't know what MouseEvent does you'll see that in action in this article.

MouseEvent

The MouseEventinterface represents events that occur due to the user interacting with a pointing device (such as a mouse). Common events using this interface include click, dblclick, mouseup, mousedown.

Learn more about MouseEvent.

MouseEvent constructor supports multiple browser compatibility, so you can use this for any browser you want.

MouseEvent Constructor in Action

Lets trigger a mouse click event by using the MouseEvent constructor.

Below is the code:

document.body.addEventListener('click', () => {
    name = prompt("Enter you name");
    console.log(name);
});

const simulate = new MouseEvent('click', {
    view: window,
    bubbles: true,
    cancelable: true,
    clientX: 100,
});

document.body.dispatchEvent(simulate);

Let's break the code line by line for better understanding what is happening here.

We added a click event on document.body with the addEventListener method and inside our callback function we're calling prompt function and then printing the the name variable.

Then we called MouseEvent function and passed first argument as click as first argument to set the type of mouse event.

The 2nd argument we passed is an object that sets the some properties to make mouse event work.

viewis set to windowso that we can trigger the click event on an element within window.

bubbles is set to trueto make it propagate from child parent.

clientX is the x-coordinate of the mouse click on the document.

Then we are calling document.body.dispatchEvent to trigger the click event on the body element.

Now when dispatch is run, we will see a prompt appears in window and asks for your name and when you feed your name in prompt and hit enter you'll see your name appear name console.

My Personal Blogging Website : Programming Geeks Club
My Facebook Page : Programming Geeks Club
My Telegram Channel : Programming Geeks Club
_My Twitter Account : [Kuldeep Singh]