¿Cómo simular un clic usando las coordenadas x, y en JavaScript?

94

¿Es posible utilizar las coordenadas dadas para simular un clic en JavaScript dentro de una página web?

RadiantHex
fuente
2
¿Cual es tu meta? :) ¿Estás intentando simular un clic en un mapa de imagen, por ejemplo?
Nick Craver

Respuestas:

147

Puedes enviar un clic evento de , aunque esto no es lo mismo que un clic real. Por ejemplo, no se puede utilizar para engañar a un documento iframe de dominios cruzados haciéndole creer que se hizo clic en él.

Todos los navegadores modernos son compatibles document.elementFromPointy HTMLElement.prototype.click(), desde al menos IE 6, Firefox 5, cualquier versión de Chrome y probablemente cualquier versión de Safari que le interese. Incluso seguirá enlaces y enviará formularios:

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
fuente
1
@RadiantHex: sí, de hecho IE fue el primero en implementarlo y se remonta a IE6. Las implementaciones de Chrome, Firefox y Safari 5 están bien, pero las de Safari 4 y Opera son incorrectas (aunque viables). Consulte quirksmode.org/dom/w3c_cssom.html#documentview .
Andy E
1
¡¡Estoy tan feliz con este descubrimiento !! = D Hace que muchas cosas consideradas imposibles sean posibles ahora =) ... o al menos menos complicadas. ¡¡Gracias!!
RadiantHex
1
Esto no parece funcionar con eventos $ .live (), ¿alguien sabe cómo hacerlo funcionar con eventos creados con $ .live () también?
ActionOwl
1
@AndyE Esto ahora funciona en la siguiente condición: Tengo una página web, estoy cargando Iframe desde otro dominio que no sea mi dominio. Y quiero hacer clic en el área de iframe. ¿Tiene alguna solución al respecto?
Parixit
2
@parixit: no, no es posible. Puede simular un clic en el iframe, pero simplemente se propagará hasta el documento que lo contiene. Nada en el documento contenido se verá afectado (por razones de seguridad muy obvias).
Andy E
67

Sí, puede simular un clic del mouse creando un evento y enviándolo:

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

Tenga cuidado con el uso del clickmétodo en un elemento: está ampliamente implementado pero no es estándar y fallará, por ejemplo, en PhantomJS. Supongo que la implementación de jQuery .click()hace lo correcto pero no lo he confirmado.

Victor Zamanian
fuente
Me salvó de un lío. Mi método inicial falló, pero este vino al rescate, gracias.
iChux
3
plus1 por no usar jQuery. Al contrario de la respuesta aceptada, éste hace responder a la pregunta.
tomekwi
1
Esto es mucho, mucho más poderoso que el de jQuery$.click()
Steven Lu
7
initMouseEventha quedado obsoleto: developer.mozilla.org/en-US/docs/Web/API/MouseEvent/…
vikeri
3
En lugar de los obsoletos initMouseEvent, puede usar var event = new MouseEvent( "click", { clientX: x, clientY: y, bubbles: true } )Esto también se muestra en stackoverflow.com/a/36144688/384670 .
M Katz
28

Esta es solo la respuesta de torazaburo , actualizada para usar un 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);
}
usuario2067021
fuente
0

No me funciona, pero imprime el elemento correcto en la consola.

este es el 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
fuente
-2

Por razones de seguridad, no puede mover el puntero del mouse con javascript ni simular un clic con él.

¿Qué es lo que está tratando de lograr?

QuantumSoup
fuente
@Aicule: ¡gracias por hacérmelo saber! Agregaré un poco de información a la pregunta. Solo estoy experimentando, nada realmente productivo =)
RadiantHex
2
En Chrome y Safari, puede disparar un clic en una posición x, y específica. Así es como funciona esta demostración . Firefox es el único navegador en el que falla, por lo que tal vez sea una política de seguridad específica de Firefox.
jueves
La verdad está en la respuesta a continuación, createEvent()+initMouseEvent()
Valer
1
En mi caso, testing.
Jose Nobile
Definitivamente puede simular un clic con coordenadas X / Y específicas, aunque no se comportará exactamente de la misma manera.
Agamemnus