Como simular um clique do mouse usando JavaScript?


137

Eu sei sobre o document.form.button.click()método No entanto, eu gostaria de saber como simular o onclickevento.

Encontrei esse código em algum lugar aqui no Stack Overflow, mas não sei como usá-lo :(

function contextMenuClick()
{
    var element= 'button'

    var evt = element.ownerDocument.createEvent('MouseEvents');

    evt.initMouseEvent('contextmenu', true, true,
         element.ownerDocument.defaultView, 1, 0, 0, 0, 0, false,
         false, false, false, 1, null);

    element.dispatchEvent(evt);
}

Como acionar um evento de clique do mouse usando JavaScript?


3
O que você está tentando alcançar fazendo isso?
Eric

@Nok Imchen - Você poderia fornecer um link para a pergunta original da qual obteve o código?
Jared Farrish

@ Eric, é o mesmo que o link abaixo
Nok Imchen

Respostas:


216

(Versão modificada para fazê-lo funcionar sem prototype.js)

function simulate(element, eventName)
{
    var options = extend(defaultOptions, arguments[2] || {});
    var oEvent, eventType = null;

    for (var name in eventMatchers)
    {
        if (eventMatchers[name].test(eventName)) { eventType = name; break; }
    }

    if (!eventType)
        throw new SyntaxError('Only HTMLEvents and MouseEvents interfaces are supported');

    if (document.createEvent)
    {
        oEvent = document.createEvent(eventType);
        if (eventType == 'HTMLEvents')
        {
            oEvent.initEvent(eventName, options.bubbles, options.cancelable);
        }
        else
        {
            oEvent.initMouseEvent(eventName, options.bubbles, options.cancelable, document.defaultView,
            options.button, options.pointerX, options.pointerY, options.pointerX, options.pointerY,
            options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, options.button, element);
        }
        element.dispatchEvent(oEvent);
    }
    else
    {
        options.clientX = options.pointerX;
        options.clientY = options.pointerY;
        var evt = document.createEventObject();
        oEvent = extend(evt, options);
        element.fireEvent('on' + eventName, oEvent);
    }
    return element;
}

function extend(destination, source) {
    for (var property in source)
      destination[property] = source[property];
    return destination;
}

var eventMatchers = {
    'HTMLEvents': /^(?:load|unload|abort|error|select|change|submit|reset|focus|blur|resize|scroll)$/,
    'MouseEvents': /^(?:click|dblclick|mouse(?:down|up|over|move|out))$/
}
var defaultOptions = {
    pointerX: 0,
    pointerY: 0,
    button: 0,
    ctrlKey: false,
    altKey: false,
    shiftKey: false,
    metaKey: false,
    bubbles: true,
    cancelable: true
}

Você pode usá-lo assim:

simulate(document.getElementById("btn"), "click");

Note que como um terceiro parâmetro você pode passar em 'opções'. As opções que você não especifica são extraídas das opções padrão (consulte a parte inferior do script). Portanto, se você, por exemplo, deseja especificar coordenadas do mouse, pode fazer algo como:

simulate(document.getElementById("btn"), "click", { pointerX: 123, pointerY: 321 })

Você pode usar uma abordagem semelhante para substituir outras opções padrão.

Os créditos devem ir para kangax . Aqui está a fonte original (específica para prototype.js).


6
Os créditos devem ir para kangax, conforme observado na minha resposta. Eu fiz isso biblioteca :) agnóstico
TweeZz

Como passar as coordenadas do mouse para esse script?
Dmitry

1
Vou editar o post e adicione um exemplo de como você poderia passar em coordenadas do mouse ..
TweeZz

1
I transformaram este em um módulo CoffeeScript para inclusão fácil em seus projetos aqui: github.com/joscha/eventr
Joscha

1
como isso é diferente de $ (el) .click (), como sua solução funciona para mim, opção jQuery não
prata Ringvee

53

Aqui está uma função JavaScript pura que simula um clique (ou qualquer evento do mouse) em um elemento de destino:

function simulatedClick(target, options) {

  var event = target.ownerDocument.createEvent('MouseEvents'),
      options = options || {},
      opts = { // These are the default values, set up for un-modified left clicks
        type: 'click',
        canBubble: true,
        cancelable: true,
        view: target.ownerDocument.defaultView,
        detail: 1,
        screenX: 0, //The coordinates within the entire page
        screenY: 0,
        clientX: 0, //The coordinates within the viewport
        clientY: 0,
        ctrlKey: false,
        altKey: false,
        shiftKey: false,
        metaKey: false, //I *think* 'meta' is 'Cmd/Apple' on Mac, and 'Windows key' on Win. Not sure, though!
        button: 0, //0 = left, 1 = middle, 2 = right
        relatedTarget: null,
      };

  //Merge the options with the defaults
  for (var key in options) {
    if (options.hasOwnProperty(key)) {
      opts[key] = options[key];
    }
  }

  //Pass in the options
  event.initMouseEvent(
      opts.type,
      opts.canBubble,
      opts.cancelable,
      opts.view,
      opts.detail,
      opts.screenX,
      opts.screenY,
      opts.clientX,
      opts.clientY,
      opts.ctrlKey,
      opts.altKey,
      opts.shiftKey,
      opts.metaKey,
      opts.button,
      opts.relatedTarget
  );

  //Fire the event
  target.dispatchEvent(event);
}

Aqui está um exemplo de trabalho: http://www.spookandpuff.com/examples/clickSimulation.html

Você pode simular um clique em qualquer elemento no DOM . Algo como simulatedClick(document.getElementById('yourButtonId'))iria funcionar.

Você pode passar um objeto optionspara substituir os padrões (para simular qual botão do mouse você deseja, se Shift/ Alt/ Ctrlestá pressionado etc.) As opções aceitas são baseadas na API MouseEvents .

Eu testei no Firefox, Safari e Chrome. O Internet Explorer pode precisar de tratamento especial, não tenho certeza.


Isso funcionou muito bem para mim, no Chrome, onde os elementos não parecem ter o evento click ().
Howard M. Lewis Navio

Isso é ótimo - exceto type: options.click || 'click'que provavelmente deveria ser type: options.type || 'click'.
Elliot Winkler

O problema com esta solução é que ele não clicará nos elementos contidos. por exemplo. <div id = "outer"><div id = "inner"></div></div> simulatedClick(document.getElementById('outer'));não clicará no elemento interno.
precisa saber é o seguinte

1
Porém, não é assim que funciona a bolha de eventos - se você clicar em um elemento externo, seus ancestrais receberão o evento click enquanto ele borbulha, mas seus filhos não. Imagine se o seu exterior divcontivesse um botão ou um link - você não desejaria um clique no exterior para acionar um clique no elemento interno.
Ben Hull

5
Não use o ||operador para casos como esse, porque oops canBubble:options.canBubble || true,sempre avalia como verdadeiro agora e, aparentemente, ninguém notará isso por 5 anos.
Winchestro

51

Uma maneira mais fácil e padrão de simular um clique do mouse seria usar diretamente o construtor de eventos para criar um evento e enviá-lo.

Embora o MouseEvent.initMouseEvent()método seja mantido para compatibilidade com versões anteriores, a criação de um objeto MouseEvent deve ser feita usando o MouseEvent()construtor.

var evt = new MouseEvent("click", {
    view: window,
    bubbles: true,
    cancelable: true,
    clientX: 20,
    /* whatever properties you want to give it */
});
targetElement.dispatchEvent(evt);

Demo: http://jsfiddle.net/DerekL/932wyok6/

Isso funciona em todos os navegadores modernos. MouseEvent.initMouseEventInfelizmente, para navegadores antigos, incluindo o IE, terá que ser usado, embora esteja obsoleto.

var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", canBubble, cancelable, view,
                   detail, screenX, screenY, clientX, clientY,
                   ctrlKey, altKey, shiftKey, metaKey,
                   button, relatedTarget);
targetElement.dispatchEvent(evt);

Isso parece falhar quando o elemento A em que quero ser clicado tem href = "javascript: void (0)" e responde a outro manipulador de cliques que foi anexado ao objeto.
deejbee

existe uma maneira rápida de obter eventos comuns? Percebo que posso aumentar o clique facilmente em um botão, mas não existe um padrão de "mouseenter", "mouseleave" que eu possa referenciar em vez de criar um novo evento de mouse, como feito acima?
James Joshua Street

12

Na documentação da Mozilla Developer Network (MDN), HTMLElement.click () é o que você está procurando. Você pode descobrir mais eventos aqui .


2
@Ercksen Como a página MDN diz, ele somente dispara o evento click do elemento quando usado com elementos que o suportam (por exemplo, um dos tipos <input>).
Christophe

9

Com base na resposta de Derek, verifiquei que

document.getElementById('testTarget')
  .dispatchEvent(new MouseEvent('click', {shiftKey: true}))

funciona como esperado, mesmo com modificadores de chave. E essa não é uma API reprovada, pelo que pude ver. Você também pode verificar nesta página .



-1

Código JavaScript

   //this function is used to fire click event
    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);
      }
    }

function showPdf(){
  eventFire(document.getElementById('picToClick'), 'click');
}

Código HTML

<img id="picToClick" data-toggle="modal" data-target="#pdfModal" src="img/Adobe-icon.png" ng-hide="1===1">
  <button onclick="showPdf()">Click me</button>
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.