Wie simuliert man einen Klick mit JavaScript?

Question

Ich frage mich nur, wie ich JavaScript verwenden kann, um einen Klick auf ein Element zu simulieren.

Derzeit habe ich:

function simulateClick(control) {
  if (document.all) {
    control.click();
  } else {
    var evObj = document.createEvent('MouseEvents');
    evObj.initMouseEvent('click', true, true, window, 1, 12, 345, 7, 220, false, false, true, false, 0, null );
    control.dispatchEvent(evObj);
  }
}

<a href="http://www.google.com" id="mytest1">test 1</a><br>

<script type="text/javascript">
    simulateClick(document.getElementById('mytest1'));
</script>

Aber es funktioniert nicht :(

Irgendwelche Ideen?

Answer 1

Die oberste Antwort ist die beste! Allerdings war es nicht auslösen Maus Ereignisse für mich in Firefox, wenn etype = 'click' .

Also habe ich die document.createEvent zu 'MouseEvents' und damit war das Problem behoben. Der zusätzliche Code ist zu testen, ob ein anderes Bit des Codes mit dem Ereignis gestört wurde, und wenn es abgebrochen wurde, würde ich das in die Konsole protokollieren.

function eventFire(el, etype){
  if (el.fireEvent) {
    el.fireEvent('on' + etype);
  } else {
    var evObj = document.createEvent('MouseEvents');
    evObj.initEvent(etype, true, false);
    var canceled = !el.dispatchEvent(evObj);
    if (canceled) {
      // A handler called preventDefault.
      console.log("automatic click canceled");
    } else {
      // None of the handlers called preventDefault.
    } 
  }
}

Answer 2

Die Simulation eines Ereignisses ist ähnlich wie die Erstellung eines benutzerdefinierten Ereignisses. So simulieren Sie ein Mausereignis

• müssen wir eine MouseEvent mit document.createEvent() .
• Dann mit initMouseEvent() müssen wir das Mausereignis einrichten, das auftreten wird.
• Senden Sie dann das Mausereignis an das Element, für das Sie ein Ereignis simulieren möchten.

Im folgenden Code habe ich setTimeout so dass die Schaltfläche nach 1 Sekunde automatisch angeklickt wird.

const div = document.querySelector('div');

div.addEventListener('click', function(e) {
  console.log('Simulated click');
});

const simulatedDivClick = document.createEvent('MouseEvents');

simulatedDivClick.initEvent(
  'click', /* Event type */
  true, /* bubbles */
  true, /* cancelable */
  document.defaultView, /* view */
  0, /* detail */
  0, /* screenx */
  0, /* screeny */
  0, /* clientx */
  0, /* clienty */
  false, /* ctrlKey */
  false, /* altKey */
  false, /* shiftKey */
  0, /* metaKey */
  null, /* button */
  null /* relatedTarget */
);

// Automatically click after 1 second
setTimeout(function() {
  div.dispatchEvent(simulatedDivClick);
}, 1000);

<div> Automatically click </div>

Answer 3

document.getElementById('elementId').dispatchEvent(new MouseEvent("click",{bubbles: true, cancellable: true}));

Folgen Sie diesem Link, um mehr über die Mausereignisse mit Javascript und die Browserkompatibilität für dieselben zu erfahren

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent#Browser_compatibility

Answer 4

document.getElementById("element").click()

Wählen Sie einfach das Element aus dem DOM aus. Der Knoten hat eine Klickfunktion, die Sie aufrufen können.

Oder

document.querySelector("#element").click()

Answer 5

Ehrlich gesagt keine der Antworten hier arbeitete für meinen speziellen Fall. jquery war aus der Frage, so dass alle diese Antworten ungetestet sind. Ich werde sagen, ich baute diese Antwort aus @mnishiguchi Antwort oben, aber dies war das einzige, was tatsächlich am Ende funktioniert.

// select the element by finding the id of mytest1
const el = document.querySelector('#mytest1');

// pass the element to the simulateClick function
simulateClick( el );

function simulateClick(element){
    trigger( element, 'mousedown' );
    trigger( element, 'click' );
    trigger( element, 'mouseup' );

    function trigger( elem, event ) {
      elem.dispatchEvent( new MouseEvent( event ) );
    }
}