Como simular um clique usando as coordenadas x, y em JavaScript?

93

É possível usar as coordenadas fornecidas para simular um clique em JavaScript em uma página da web?

RadiantHex
fonte
2
Qual é o seu objetivo? :) Você está tentando simular um clique em um mapa de imagem, por exemplo?
Nick Craver

Respostas:

145

Você pode enviar um evento de clique , embora isso não seja o mesmo que um clique real. Por exemplo, ele não pode ser usado para enganar um documento iframe entre domínios, fazendo-o pensar que foi clicado.

Todos os navegadores modernos suportam document.elementFromPointe HTMLElement.prototype.click(), desde pelo menos o IE 6, Firefox 5, qualquer versão do Chrome e provavelmente qualquer versão do Safari que você provavelmente goste. Ele até seguirá links e enviará formulários:

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
fonte
1
@RadiantHex: sim, na verdade o IE foi o primeiro a implementá-lo e isso remonta ao IE6. As implementações do Chrome, Firefox e Safari 5 estão bem, mas o Safari 4 e o Opera estão incorretos (embora viável). Consulte quirksmode.org/dom/w3c_cssom.html#documentview .
Andy E
1
Estou tão feliz com essa descoberta !! = D Torna possíveis muitas coisas consideradas impossíveis =) ... ou pelo menos menos complicadas. Obrigado!!
RadiantHex
1
Isso não parece funcionar com eventos $ .live (), alguém sabe como fazê-lo funcionar com eventos criados com $ .live () também?
ActionOwl
1
@AndyE Agora está funcionando nas seguintes condições: Tenho uma página da web, estou carregando o Iframe de outro domínio que não o meu. E quero clicar na área do iframe. Você tem alguma solução em relação a isso?
Parixit
2
@parixit: não, não é possível. Você pode simular um clique no iframe, mas ele apenas propagará o documento que o contém. Nada no documento contido será afetado (por razões de segurança muito óbvias).
Andy E
67

Sim, você pode simular um clique do mouse criando um evento e enviando-o:

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

Cuidado ao usar o clickmétodo em um elemento - ele é amplamente implementado, mas não é padrão e falhará, por exemplo, no PhantomJS. Presumo que a implementação do jQuery de .click()faz a coisa certa, mas não foi confirmada.

Victor Zamanian
fonte
Me salvou de uma bagunça. Meu método inicial falhou, mas este veio ao resgate, obrigado.
iChux
3
plus1 por não usar jQuery. Ao contrário da resposta aceita, este faz responder à pergunta.
tomekwi
1
Isso é muito, muito mais poderoso do que o jQuery$.click()
Steven Lu
7
initMouseEventfoi descontinuado: developer.mozilla.org/en-US/docs/Web/API/MouseEvent/…
vikeri
3
Em vez do obsoleto, initMouseEventvocê pode usar var event = new MouseEvent( "click", { clientX: x, clientY: y, bubbles: true } )Isso também é mostrado em stackoverflow.com/a/36144688/384670 .
M Katz
28

Esta é apenas a resposta de torazaburo , atualizada para usar um objeto 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
fonte
0

não funciona para mim, mas imprime o elemento correto no console

este é o código:

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
fonte
-2

Por razões de segurança, você não pode mover o ponteiro do mouse com javascript, nem simular um clique com ele.

O que você está tentando realizar?

quantumSoup
fonte
@Aicule: obrigado por me avisar! Vou acrescentar um pouco de informação à pergunta. Estou apenas experimentando, nada realmente produtivo =)
RadiantHex
2
No Chrome e no Safari, você pode disparar um clique em uma posição x, y específica. É assim que esta demonstração funciona. O Firefox é o único navegador onde ele falha, então talvez seja uma política de segurança específica do Firefox.
thdoan
A verdade está na resposta abaixo, createEvent()+initMouseEvent()
Valer
1
No meu caso, teste.
Jose Nobile,
Você definitivamente pode simular um clique com coordenadas X / Y específicas, embora não se comporte exatamente da mesma maneira.
Agamemnus