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

Question

Is it possible to use given coordinates in order to simulate a click in JavaScript within a webpage?

What's your goal? :) Are you trying to simulate a click on an image map for example? — Nick Craver, Jul 18 '10 at 21:41

score 191 · Accepted Answer · edited Nov 05 '21 at 04:31

191

You can dispatch a click event, though this is not the same as a real click. For instance, it can't be used to trick a cross-domain iframe document into thinking it was clicked.

All modern browsers support document.elementFromPoint and HTMLElement.prototype.click(), since at least IE 6, Firefox 5, any version of Chrome and probably any version of Safari you're likely to care about. It will even follow links and submit forms:

document.elementFromPoint(x, y).click();

edited Nov 05 '21 at 04:31

Lionel Rowe

5,164
1
14
27

answered Jul 18 '10 at 21:56

Andy E

338,112
86
474
445

2

@RadiantHex: yes, in fact IE was the first to implement it and it goes way back to IE6. Chrome, Firefox and Safari 5 implementations are fine but Safari 4's and Opera's are incorrect (though workable). See http://www.quirksmode.org/dom/w3c_cssom.html#documentview. – Andy E Jul 18 '10 at 22:14
1

I'm so happy about this discovery!! =D Makes many things deemed impossible possible now =) ... or at least less complicated. Thanks!! – RadiantHex Jul 18 '10 at 22:18
1

This does not appear to work with $.live() events, does anyone how to make it work with events created with $.live() as well? – ActionOwl Aug 30 '11 at 20:50
1

@AndyE This is now working in following condition: I have webpage, I am loading Iframe from another domain than my domain. And I want to click in iframe area. Do you have some solution regarding this? – Parixit Jun 30 '13 at 10:27
2

@parixit: nope, it's not possible. You can simulate a click on the iframe but it will just propagate up the containing document. Nothing in the contained document will be affected (for very obvious security reasons). – Andy E Jun 30 '13 at 12:55
@AndyE So its only possible for both of same origin (iframe and parent webpage). correct? – Parixit Jul 01 '13 at 11:11
@Andy E - What do you say to [@torazaburo's answer](http://stackoverflow.com/a/16509592/165673) - wouldn't that be simulating a "real" mouse click? – Yarin Sep 10 '13 at 13:22
@Yarin: no, torazaburo's is doing what my answer suggests, that is just spoofing an event and firing it on the element. A "real" mouse click, for example those at the OS level, would do more, like set focus or follow a link at the given x/y location. Sometimes you see questions asking for that, but since it would only really be useful for nefarious deeds (like forcing clicks on ads), it's not possible. – Andy E Sep 10 '13 at 14:26
@AndyE Is not working with – Ave Jul 29 '16 at 05:54
This doesn't appear to work in Firefox Nightly. To see for yourself, go to [this demo](http://thdoan.github.io/magnify/demo-map.html) in FF Nightly and execute `document.elementFromPoint(916, 263).click()` from the console. Now do the same in Chrome. The page redirects to Google in Chrome, but nothing happens in Firefox. – thdoan Oct 19 '16 at 08:29
But, a canvas element needs to know click coordinates in order to detect clicking of objects in the canvas. How do we do that? – trusktr Dec 19 '17 at 21:51

score 84 · Answer 2 · edited Nov 17 '17 at 10:59

84

Yes, you can simulate a mouse click by creating an event and dispatching it:

function click(x,y){
    var ev = document.createEvent("MouseEvent");
    var el = document.elementFromPoint(x,y);
    ev.initMouseEvent(
        "click",
        true /* bubble */, true /* cancelable */,
        window, null,
        x, y, 0, 0, /* coordinates */
        false, false, false, false, /* modifier keys */
        0 /*left*/, null
    );
    el.dispatchEvent(ev);
}

Beware of using the click method on an element -- it is widely implemented but not standard and will fail in e.g. PhantomJS. I assume jQuery's implemention of .click() does the right thing but have not confirmed.

edited Nov 17 '17 at 10:59

Victor Zamanian

3,100
24
31

answered May 12 '13 at 16:32

Saved me from a mess. My initial method failed but this one came to the rescue, thanks. – iChux Jan 22 '14 at 11:56
4

plus1 for not using jQuery. In contrary to the accepted answer, this one _does_ answer the question. – tomekwi Dec 02 '14 at 14:43
1

This is much, much more powerful than jQuery's `$.click()` – Steven Lu Dec 04 '14 at 04:58
12

`initMouseEvent` has been deprecated: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/initMouseEvent – vikeri Apr 14 '15 at 13:35
@torazaburo, Seem not click in my test page: http://codepen.io/r0ysy0301/full/grjaOp/. This page using – Ave Jul 29 '16 at 05:36
This function isn't working in Firefox Nightly (v52) on this [demo page](http://thdoan.github.io/magnify/demo-map.html). Try `click(916,263)`. – thdoan Oct 19 '16 at 09:24
Does this work so that a canvas element can use the coordinate to change drawing of things inside the canvas? – trusktr Dec 19 '17 at 21:52
11

Instead of the deprecated `initMouseEvent` you can use `var event = new MouseEvent( "click", { clientX: x, clientY: y, bubbles: true } )` This is also shown in https://stackoverflow.com/a/36144688/384670. – M Katz Mar 26 '18 at 07:11

score 47 · Answer 3 · edited May 23 '17 at 12:18

47

This is just torazaburo's answer, updated to use a MouseEvent object.

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

    var el = document.elementFromPoint(x, y);

    el.dispatchEvent(ev);
}

edited May 23 '17 at 12:18

Community

1
1

answered Mar 22 '16 at 01:28

user2067021

4,399
37
44

score 3 · Answer 4 · answered May 02 '20 at 18:07

3

it doenst work for me but it prints the correct element to the console

this is the code:

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

    var el = document.elementFromPoint(x, y);
    console.log(el); //print element to console
    el.dispatchEvent(ev);
}
click(400, 400);

answered May 02 '20 at 18:07

VilgotanL

328
2
9

5

It adds nothing to this answer : https://stackoverflow.com/a/36144688/2000654 – Nicolas Boisteault May 11 '21 at 16:10

score -5 · Answer 5 · answered Jul 18 '10 at 21:50

-5

For security reasons, you can't move the mouse pointer with javascript, nor simulate a click with it.

What is it that you are trying to accomplish?

answered Jul 18 '10 at 21:50

quantumSoup

27,197
9
43
57

@Aicule: thanks for letting me know! I'll add a bit of info to the question. I'm just experimenting, nothing really productive =) – RadiantHex Jul 18 '10 at 21:57
2

In Chrome and Safari, you can fire a click at a specific x,y position. This is how [this demo](http://thdoan.github.io/magnify/demo-map.html) works. Firefox is the only browser where it fails, so maybe it's a Firefox-specific security policy. – thdoan Oct 19 '16 at 09:27
Truth lies in the answer below, `createEvent()` + `initMouseEvent()` – Valer Dec 11 '16 at 18:40
1

In my case, testing. – Jose Nobile Apr 19 '17 at 03:35
You can definitely simulate a click with specific X/Y coordinates, although it won't behave exactly the same way. – Agamemnus Jan 13 '19 at 21:48

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

5 Answers5

Linked

Related