Simulate a Mouse Click Using JavaScript
Tags: javascript, programming, tutorial, beginners
Published: 2022-12-05 13:08:51

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 `MouseEvent `interface 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`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent).

`MouseEvent` constructor supports multiple [browser compatibility](https://github.com/mdn/browser-compat-data/issues/new?mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FAPI%2FMouseEvent&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EMDN+page+report+details%3C%2Fsummary%3E%0A%0A*+Query%3A+%60api.MouseEvent%60%0A*+Report+started%3A+2022-12-05T12%3A08%3A12.607Z%0A%0A%3C%2Fdetails%3E&title=api.MouseEvent+-+%3CSUMMARIZE+THE+PROBLEM%3E&template=data-problem.yml), 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:

```javascript
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.

`view `is set to `window `so that we can trigger the click event on an element within `window`.

`bubbles` is set to `true `to 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](https://programmingeeksclub.com/)_
_My Facebook Page : [Programming Geeks Club](https://www.facebook.com/profile.php?id=100086258693659)_
_My Telegram Channel : [Programming Geeks Club](https://t.me/dpgcl)_
_My Twitter Account : [Kuldeep Singh]