Como faço para programaticamente clicar em um elemento em JavaScript?

Question

No IE, eu só posso chamar element.click () de JavaScript - como faço para realizar a mesma tarefa no Firefox? Idealmente, eu gostaria de ter algum JavaScript que funcionam igualmente bem cross-browser, mas se for necessário eu vou ter diferentes per-browser JavaScript para isso.

Answer 1

O document.createEvent documentação diz que " O createEvent método está obsoleta. Use construtores evento vez. "

Portanto, você deve usar este método em vez disso:

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

e fogo-lo em um elemento como este:

element.dispatchEvent(clickEvent);

aqui .

Answer 2

Para as ligações firefox parecem ser "especial". A única maneira que eu era capaz de começar este trabalho foi utilizar o createEvent descrito aqui na MDN e chamar a função initMouseEvent. Mesmo que não funcionou completamente, eu tinha que contar manualmente o navegador para abrir um link ...

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

Usando jQuery você pode fazer exatamente a mesma coisa, por exemplo:

$("a").click();

O que vai "clique em" todas as âncoras na página.

Answer 4

element.click () é um método padrão descrito por o W3C DOM especificação . do Mozilla Gecko / Firefox segue o padrão e apenas permite este método a ser chamado na INPUT elementos.

Answer 5

Você está tentando realmente seguir o link ou acionar o onclick? Você pode desencadear um onclick com algo parecido com isto:

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

Answer 6

Aqui está uma função de trabalho cross browser (utilizável para que não seja manipuladores de clique também):

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

Eu usei a função de KooiInc listados acima, mas eu tive que usar dois tipos de entrada diferentes de um 'botão' para o IE e um 'enviar' para o Firefox. Eu não sou exatamente certo porquê, mas ele funciona.

// HTML

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

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

Eu pesquisar e tentou muitas sugestões, mas isso é o que acabou funcionando. Se eu tivesse mais algum tempo eu teria gostado de investigar por que enviar os trabalhos com FF e tecla com IE, mas que seria um luxo agora, então para o próximo problema.