Is it possible to use given coordinates in order to simulate a click in JavaScript within a webpage?
-
3What's your goal? :) Are you trying to simulate a click on an image map for example?Nick Craver– Nick Craver2010-07-18 21:41:36 +00:00Commented Jul 18, 2010 at 21:41
-
For me, none of the solutions posted here work in 2024 in either Chrome or Firefox. Tried them in multiple ways, tried simulating pointerdown instead of click. Zero effect. The elements on page get correctly detected. But the click() method on them has absolutely zero effect.dolanator– dolanator2024-04-25 01:18:44 +00:00Commented Apr 25, 2024 at 1:18
Add a comment
|
5 Answers
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();
12 Comments
Andy E
@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
I'm so happy about this discovery!! =D Makes many things deemed impossible possible now =) ... or at least less complicated. Thanks!!
ActionOwl
This does not appear to work with $.live() events, does anyone how to make it work with events created with $.live() as well?
Parixit
@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
@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).
|
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.
8 Comments
iChux
Saved me from a mess. My initial method failed but this one came to the rescue, thanks.
tomekwi
plus1 for not using jQuery. In contrary to the accepted answer, this one does answer the question.
Steven Lu
This is much, much more powerful than jQuery's
$.click()
vikeri
initMouseEvent has been deprecated: developer.mozilla.org/en-US/docs/Web/API/MouseEvent/…
M Katz
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. |
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);
}
1 Comment
Spencer Fleming
I had to change this to clientX and clientY since elementFromPoint is relative to the viewport developer.mozilla.org/en-US/docs/Web/API/Document/…
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);
1 Comment
Nicolas Boisteault
It adds nothing to this answer : stackoverflow.com/a/36144688/2000654
These are all nice solutions but they merely provide the fundamentals of the necessary functions. In reality, if you want to trigger a click-by-pixel in a generic manner, you run into numerous issues:
- The
document.elementFromPointis not necessarily the real target element that you want to click on. - The array version
document.elementsFromPointwill return all elements on the point throughout the DOM tree but then you need to locate the correct element. - To be able to tell whether the click worked or not, you need to observe the page/element for changes.
- Etc. Each of these steps is complex on its own and requires detailed attention. This complexity probably explain the high number of failures in the responses above. If anyone comes up with a nice snippet/library which does it in a robust way - I'd be happy to test it.
