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
.
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.
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
My Facebook Page : Programming Geeks Club
My Telegram Channel : Programming Geeks Club
_My Twitter Account : [Kuldeep Singh]
Top comments (1)
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