DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Simulate a Mouse Click Using JavaScript
Kuldeep Singh
Kuldeep Singh

Posted on

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);
Enter fullscreen mode Exit fullscreen mode

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]

Top comments (1)

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ • Edited on

This isn't really simulating what happens in a physical mouse click. For a true simulation, you should probably fire the whole sequence of events that occurs during the interaction - otherwise, the resulting behaviour may well not be the same as that which would occur during a real mouse click... making your 'simulation' inaccurate

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!