¿Cómo hago clic programáticamente en un elemento en JavaScript?

Question

En IE, solo puedo llamar a element.click () desde JavaScript. ¿Cómo realizo la misma tarea en Firefox? Idealmente, me gustaría tener un JavaScript que funcione igual de bien en todos los navegadores, pero si es necesario, tendré diferentes JavaScript por navegador para esto.

Answer 1

La document.createEvent documentación dice ese " El método createEvent está en desuso. Utilice constructores de eventos . "

Entonces debería usar este método en su lugar:

var clickEvent = new MouseEvent("click", {
    "view": window,
    "bubbles": true,
    "cancelable": false
});

y dispáralo sobre un elemento como este:

element.dispatchEvent(clickEvent);

como se muestra here .

Answer 2

Los enlaces de Firefox parecen ser " especiales " ;. La única forma en que pude hacer que esto funcionara fue usando createEvent descrito aquí en MDN y llamar a la función initMouseEvent. Incluso eso no funcionó completamente, tuve que decirle manualmente al navegador que abriera un enlace ...

var theEvent = document.createEvent("MouseEvent");
theEvent.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
var element = document.getElementById('link');
element.dispatchEvent(theEvent);

while (element)
{
    if (element.tagName == "A" && element.href != "")
    {
        if (element.target == "_blank") { window.open(element.href, element.target); }
        else { document.location = element.href; }
        element = null;
    }
    else
    {
        element = element.parentElement;
    }
}

Answer 3

Al utilizar jQuery puede hacer exactamente lo mismo, por ejemplo:

$("a").click();

Que hará " clic " todos los anclajes en la página.

Answer 4

element.click () es un método estándar descrito por Especificación W3C DOM . El Gecko / Firefox de Mozilla sigue el estándar y solo permite llamar a este método en ENTRADA elementos.

Answer 5

¿Estás intentando seguir el enlace o activar el clic? Puedes activar un clic con algo como esto:

var link = document.getElementById(linkId);
link.onclick.call(link);

Answer 6

Aquí hay una función de trabajo de navegador cruzado (que también se puede usar para otros que no sean controladores de clic):

function eventFire(el, etype){
    if (el.fireEvent) {
      el.fireEvent('on' + etype);
    } else {
      var evObj = document.createEvent('Events');
      evObj.initEvent(etype, true, false);
      el.dispatchEvent(evObj);
    }
}

Answer 7

Utilicé la función de KooiInc mencionada anteriormente, pero tuve que usar dos tipos de entrada diferentes, un 'botón' para IE y un 'envío' para Firefox. No estoy exactamente seguro de por qué, pero funciona.

// HTML

<input type="button" id="btnEmailHidden" style="display:none" />
<input type="submit" id="btnEmailHidden2" style="display:none" />

// en JavaScript

var hiddenBtn = document.getElementById("btnEmailHidden");

if (hiddenBtn.fireEvent) {
    hiddenBtn.fireEvent('onclick');
    hiddenBtn[eType]();
}
else {
    // dispatch for firefox + others
    var evObj = document.createEvent('MouseEvent');
    evObj.initEvent(eType, true, true);
    var hiddenBtn2 = document.getElementById("btnEmailHidden2");
    hiddenBtn2.dispatchEvent(evObj);
}

He buscado e intentado muchas sugerencias, pero esto es lo que terminó funcionando. Si hubiera tenido algo más de tiempo, me hubiera gustado investigar por qué enviar trabajos funciona con FF y button con IE, pero eso sería un lujo en este momento, así que continúe con el siguiente problema.