Heim > Web-Frontend > js-Tutorial > So simulieren Sie Klicks in JavaScript: „click()' vs. „dispatchEvent()'?

So simulieren Sie Klicks in JavaScript: „click()' vs. „dispatchEvent()'?

Mary-Kate Olsen
Freigeben: 2024-12-04 06:30:15
Original
680 Leute haben es durchsucht

How to Simulate Clicks in JavaScript: `click()` vs. `dispatchEvent()`?

Klicks in JavaScript simulieren: Eine Anleitung

Elementklicks mit JavaScript zu simulieren ist eine häufige Aufgabe in der Webentwicklung. Dies kann je nach den Kompatibilitätsanforderungen des Browsers auf verschiedene Weise erreicht werden.

Mit der click()-Methode (nur IE)

Im Internet Explorer können Sie Folgendes verwenden: die click()-Methode direkt auf dem Element, auf dem Sie ein Klickereignis auslösen möchten:

document.getElementById('btn').click();
Nach dem Login kopieren

Verwenden der destroyEvent()-Methode (Modern Browser)

Für moderne Browser können Sie die Methode „dispatchEvent()“ verwenden, um ein benutzerdefiniertes Mausklickereignis zu erstellen und es an das Element zu senden:

var evObj = document.createEvent('MouseEvents');
evObj.initMouseEvent('click', true, true, window, 1, 12, 345, 7, 220, false, false, true, false, 0, null);
document.getElementById('btn').dispatchEvent(evObj);
Nach dem Login kopieren

Warum Ihr Code funktioniert nicht

Der in der Frage bereitgestellte Code funktioniert nicht, da der Funktion „simulateClick()“ ein wichtiges Detail fehlt. Für die initMouseEvent()-Methode in der MouseEvents-API müssen die Eigenschaften clientX und clientY festgelegt werden, die die Position des Klicks im Browserfenster angeben.

Überarbeiteter Code

Um das Problem zu beheben, fügen Sie den folgenden Code hinzu, um die Eigenschaften „clientX“ und „clientY“ festzulegen:

evObj.clientX = 0;
evObj.clientY = 0;
Nach dem Login kopieren

Der aktualisierte Code sieht folgendermaßen aus dies:

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);
    evObj.clientX = 0;
    evObj.clientY = 0;
    control.dispatchEvent(evObj);
  }
}
Nach dem Login kopieren

Dies sollte nun erfolgreich einen Klick auf das Element mit der ID „mytest1“ simulieren.

Das obige ist der detaillierte Inhalt vonSo simulieren Sie Klicks in JavaScript: „click()' vs. „dispatchEvent()'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage