Comment simuler un clic en utilisant les coordonnées x, y en JavaScript?

93

Est-il possible d'utiliser des coordonnées données afin de simuler un clic en JavaScript dans une page Web?

RadiantHex
la source
2
Quel est ton but? :) Essayez-vous de simuler un clic sur une image map par exemple?
Nick Craver

Réponses:

146

Vous pouvez envoyer un événement de clic , bien que ce ne soit pas la même chose qu'un vrai clic. Par exemple, il ne peut pas être utilisé pour tromper un document iframe inter-domaines en lui faisant croire qu'il a été cliqué.

Tous les navigateurs modernes prennent en charge document.elementFromPointet HTMLElement.prototype.click(), depuis au moins IE 6, Firefox 5, toute version de Chrome et probablement toute version de Safari qui vous intéressera probablement. Il suivra même des liens et soumettra des formulaires:

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

https://developer.mozilla.org/En/DOM:document.elementFromPoint https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

Andy E
la source
1
@RadiantHex: oui, en fait, IE a été le premier à l'implémenter et cela remonte à IE6. Les implémentations de Chrome, Firefox et Safari 5 sont correctes mais Safari 4 et Opera sont incorrects (bien que réalisables). Voir quirksmode.org/dom/w3c_cssom.html#documentview .
Andy E
1
Je suis tellement content de cette découverte !! = D Rend maintenant beaucoup de choses jugées impossibles possibles =) ... ou du moins moins compliquées. Merci!!
RadiantHex
1
Cela ne semble pas fonctionner avec les événements $ .live (), est-ce que quelqu'un comment le faire fonctionner avec les événements créés avec $ .live () également?
ActionOwl
1
@AndyE Cela fonctionne maintenant dans la condition suivante: J'ai une page Web, je charge l'Iframe depuis un autre domaine que mon domaine. Et je veux cliquer dans la zone iframe. Avez-vous une solution à ce sujet?
Parixit
2
@parixit: non, ce n'est pas possible. Vous pouvez simuler un clic sur l'iframe mais cela ne fera que propager le document contenant. Rien dans le document contenu ne sera affecté (pour des raisons de sécurité très évidentes).
Andy E
67

Oui, vous pouvez simuler un clic de souris en créant un événement et en le distribuant:

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

Méfiez-vous d'utiliser la clickméthode sur un élément - elle est largement implémentée mais pas standard et échouera par exemple dans PhantomJS. Je suppose que l'implémentation de jQuery .click()fait la bonne chose mais je n'ai pas confirmé.

Victor Zamanian
la source
M'a sauvé du désordre. Ma méthode initiale a échoué mais celle-ci est venue à la rescousse, merci.
iChux
3
plus1 pour ne pas utiliser jQuery. Contrairement à la réponse acceptée, celle-ci répond à la question.
tomekwi
1
C'est beaucoup, beaucoup plus puissant que jQuery's$.click()
Steven Lu
7
initMouseEventest obsolète: developer.mozilla.org/en-US/docs/Web/API/MouseEvent
...
3
Au lieu de la version obsolète, initMouseEventvous pouvez utiliser var event = new MouseEvent( "click", { clientX: x, clientY: y, bubbles: true } )Ceci est également indiqué dans stackoverflow.com/a/36144688/384670 .
M Katz
28

Ce n'est que la réponse de torazaburo , mise à jour pour utiliser un objet MouseEvent.

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);
}
user2067021
la source
0

ça marche pour moi mais ça imprime le bon élément sur la console

c'est le 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);
VilgotanL
la source
-2

Pour des raisons de sécurité, vous ne pouvez pas déplacer le pointeur de la souris avec javascript, ni simuler un clic avec.

Qu'est-ce que vous essayez d'accomplir?

quantumSoup
la source
@Aicule: merci de me l'avoir fait savoir! Je vais ajouter quelques informations à la question. Je suis juste en train d'expérimenter, rien de vraiment productif =)
RadiantHex
2
Dans Chrome et Safari, vous pouvez déclencher un clic à une position x, y spécifique. Voici comment fonctionne cette démo . Firefox est le seul navigateur où il échoue, c'est peut-être une politique de sécurité spécifique à Firefox.
thdoan
La vérité réside dans la réponse ci-dessous, createEvent()+initMouseEvent()
Valer
1
Dans mon cas, des tests.
Jose Nobile
Vous pouvez certainement simuler un clic avec des coordonnées X / Y spécifiques, même si cela ne se comportera pas exactement de la même manière.
Agamemnus