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

javascript jquery html mouseevent mouseclick-event

154,382

Solution 1

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();

Solution 2

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.

Solution 3

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);
}

Solution 4

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);

View more solutions

154,382

RadiantHex

hello! :)

Updated on July 08, 2022

Comments

RadiantHex almost 2 years

Is it possible to use given coordinates in order to simulate a click in JavaScript within a webpage?
- Nick Craver almost 14 years
  
  What's your goal? :) Are you trying to simulate a click on an image map for example?
RadiantHex almost 14 years

@Aicule: thanks for letting me know! I'll add a bit of info to the question. I'm just experimenting, nothing really productive =)
Andy E almost 14 years

@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 quirksmode.org/dom/w3c_cssom.html#documentview.
RadiantHex almost 14 years

I'm so happy about this discovery!! =D Makes many things deemed impossible possible now =) ... or at least less complicated. Thanks!!
ActionOwl almost 13 years

This does not appear to work with $.live() events, does anyone how to make it work with events created with $.live() as well?
Parixit almost 11 years

@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?
Andy E almost 11 years

@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).
Parixit almost 11 years

@AndyE So its only possible for both of same origin (iframe and parent webpage). correct?
Yarin almost 11 years

@Andy E - What do you say to @torazaburo's answer - wouldn't that be simulating a "real" mouse click?
Andy E almost 11 years

@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.
iChux over 10 years

Saved me from a mess. My initial method failed but this one came to the rescue, thanks.
tomekwi over 9 years

plus1 for not using jQuery. In contrary to the accepted answer, this one does answer the question.
Steven Lu over 9 years

This is much, much more powerful than jQuery's $.click()
vikeri about 9 years

initMouseEvent has been deprecated: developer.mozilla.org/en-US/docs/Web/API/MouseEvent/…
Ave almost 8 years

@torazaburo, Seem not click in my test page: codepen.io/r0ysy0301/full/grjaOp. This page using <canvas>. I tried with many method. But can't click in <canvas> at position.
Ave almost 8 years

@AndyE Is not working with <canvas> tag. I tried with your code at the page: codepen.io/r0ysy0301/full/grjaOp.
thdoan over 7 years

This doesn't appear to work in Firefox Nightly. To see for yourself, go to this demo 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 over 7 years

This function isn't working in Firefox Nightly (v52) on this demo page. Try click(916,263).
thdoan over 7 years

In Chrome and Safari, you can fire a click at a specific x,y position. This is how this demo works. Firefox is the only browser where it fails, so maybe it's a Firefox-specific security policy.
Valer over 7 years

Truth lies in the answer below, createEvent() + initMouseEvent()
Jose Nobile about 7 years

In my case, testing.
trusktr over 6 years

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 over 6 years

Does this work so that a canvas element can use the coordinate to change drawing of things inside the canvas?
M Katz over 6 years

Instead of the deprecated initMouseEvent you can use var event = new MouseEvent( "click", { clientX: x, clientY: y, bubbles: true } ) This is also shown in stackoverflow.com/a/36144688/384670.
Agamemnus over 5 years

You can definitely simulate a click with specific X/Y coordinates, although it won't behave exactly the same way.
Nicolas Boisteault about 3 years

It adds nothing to this answer : stackoverflow.com/a/36144688/2000654