How to simulate a click by using x, y coordinates in JavaScript?

javascript

event-sequence

mouse-event

dom-manipulation

byAnton Shumikhin·Oct 21, 2024

Easily simulate a click at x,y coordinates in JavaScript by obtaining the target element from the document.elementFromPoint() method and firing a click event. Here's the magic:

function clickAtXY(x, y) {
  const target = document.elementFromPoint(x, y);
  if (target) { // Safety first, ensure target exists (we don't want to send clicks into the void!)
    target.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
  }
}

clickAtXY(100, 200); // Replace these numbers with your desired x,y coordinates

This function translates your (x, y) coordinates into a genuine click on the element found at that position (if it exists).

Dealing with dynamic content

Modern webpages often contain elements which may load after the initial page load like in a single-page application. Be sure to recheck your target with document.elementFromPoint when the content dynamically updates.

If you are dealing with an element within a <canvas>, remember that document.elementFromPoint will return the canvas object and not the drawn shapes within it.

Custom events and complex interactions

For some situations you might need a more complex event sequence or want to add additional data to the event. In these cases, you can create a custom MouseEvent:

var event = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true,
    'screenX': x,
    'screenY': y
});

target.dispatchEvent(event); // Fire away! *pew pew*

Fine-tuning your function

There will be times when a straightforward click event may not suffice. Consider these common scenarios:

Passive or non-interactive elements: Some elements may ignore simulated events - keep an eye out for these.

Dragging and dropping: Some gestures are a sequence of multiple types of events. To simulate these, you may need to chain events together.

Debugging: Use your browser's developer tools to investigate why certain events aren't firing as expected.

Then adjust your code accordingly.

Making it bulletproof

Simulating clicks is powerful, but handle with care:

Accessibility: Ensure your functionality doesn't compromise accessibility.

User Experience: Users should have an option to perform the action without simulated events.

Legal Matters: Unfair practices like fraudulent ad clicks can have serious legal consequences.

explain-codes / Javascript / How to simulate a click by using x, y coordinates in JavaScript?

Linked

How do I add a simple onClick event handler to a canvas element?



How do I get the coordinates of a mouse click on a canvas element?



Javascript click event listener on class



How to trigger event in JavaScript?



How do I view events fired on an element in Chrome DevTools?



Programmatically change the src of an img tag



Javascript get x and y coordinates on mouse click



Dealing with dynamic content Custom events and complex interactions Fine-tuning your function Making it bulletproof