In der tatsächlichen Anwendungsentwicklung verwenden wir häufig JS-Modulereignisse, aber manchmal stoßen wir auf einige Probleme, wie z. B. Klickereignisse. Klicken Sie in einem einfachen Beispiel auf die Schaltfläche „Senden“ außerhalb des Formulars, um das Formular abzusenden. Lass uns programmieren.
HTML:
Kopieren Sie den Codecode wie folgt:
<h3> Bitte klicken Sie auf „Senden“, und das Klickereignis der Test-Senden-Schaltfläche wird ebenfalls ausgelöst. </h3>
<button id="btn">Senden</button>
<form action="#" method="get" id="form">
<input type="text" name="site" value="www.woiweb.net" readonly/>
<input id="subbtn" type="submit" value="Klicken Sie zum Senden noch nicht auf diese Schaltfläche" onclick="alert('Ich habe übermittelt');"/>
</form>
JavaScript:
Kopieren Sie den Codecode wie folgt:
<script type="text/javascript">
var sub = document.getElementById("subbtn");
var btn = document.getElementById("btn");
//allgemeine Methode
btn.onclick = function() {
sub.click();
}
</script>
Nach dem Test gibt es keine Probleme mit IE, FF, Chrome, Opera und Safari und das Formular kann normal übermittelt werden.
Um die Schaltflächen zum Senden besser aussehen zu lassen, verwenden Entwickler im tatsächlichen Design jedoch häufig ein Tag, um sie zu verarbeiten und ein Hintergrundbild hinzuzufügen, um die Schaltfläche zu simulieren. Wir verwenden immer noch die obige Idee, um zu versuchen, ein Tag hinzuzufügen, damit sie gesendet werden kann .Formular, wir ändern nur das HTML.
HTML:
Kopieren Sie den Codecode wie folgt:
<h3> Bitte klicken Sie auf „Senden“, und das Klickereignis der Test-Senden-Schaltfläche wird ebenfalls ausgelöst. </h3>
<button id="btn">Senden</button>
<form action="#" method="get" id="form">
<input type="text" name="site" value="www.woiweb.net" readonly/>
<!--<input id="subbtn" type="submit" value="Klicken Sie zum Senden noch nicht auf diese Schaltfläche" onclick="alert('Ich habe übermittelt');"/> -->
<a id="subbtn" href="javascript:;" onclick="alert('Methode zum Senden des Formulars hier aufrufen')">Senden-Schaltfläche simulieren</a>
</form>
Javascript:
Kopieren Sie den Codecode wie folgt:
<script type="text/javascript">
var sub = document.getElementById("subbtn");
var btn = document.getElementById("btn");
//allgemeine Methode
btn.onclick = function() {
sub.click();
}
</script>
Nach der Ausführung trat das Problem auf. IE, FF und Opera waren alle in Ordnung, aber Chrome und Safari konnten nicht normal ausgeführt werden. Später habe ich online gesucht und festgestellt, dass die Bezeichnung a nicht das gleiche onclick()-Ereignis hat wie die Schaltfläche. Die Lösung besteht darin, dass IE und FF unterschiedliche Logik schreiben. Der JS-Code lautet wie folgt:
Javascript:
Kopieren Sie den Codecode wie folgt:
<script type="text/javascript">
var sub = document.getElementById("subbtn");
var btn = document.getElementById("btn");
//allgemeine Methode
btn.onclick = function() {
//sub.click();
if (/msie/i.test(navigator.userAgent)) //IE
{
sub.fireEvent("onclick");
} anders {
var e = document.createEvent('MouseEvent');
e.initEvent('click', false, false);
sub.dispatchEvent(e);
}
}
</script>
An diesem Punkt ist das Problem gelöst. Obwohl dieses Problem sehr einfach ist, wird es von allen leicht ignoriert. Ich habe es gepostet, um es mit allen zu teilen.
Grammatik:
createEvent(eventType)
Parameterbeschreibung
eventType ist der Ereignismodulname des Ereignisobjekts, das Sie abrufen möchten. Eine Liste der gültigen Ereignistypen finden Sie im Abschnitt „Beschreibung“.
Rückgabewert
Gibt ein neu erstelltes Event-Objekt des angegebenen Typs zurück.
Werfen
Wenn die Implementierung den erforderlichen Ereignistyp unterstützt, löst diese Methode eine DOMException mit dem Code NOT_SUPPORTED_ERR aus.
veranschaulichen
Diese Methode erstellt einen neuen Ereignistyp, der durch den Parameter eventType angegeben wird. Beachten Sie, dass der Wert dieses Parameters nicht der Name der zu erstellenden Ereignisschnittstelle ist, sondern der Name des DOM-Moduls, das diese Schnittstelle definiert.
In der folgenden Tabelle sind die zulässigen Werte für eventType und die von jedem Wert erstellte Ereignisschnittstelle aufgeführt:
Methode zur Initialisierung der Parameter-Ereignisschnittstelle
HTMLEvents HTMLEvent iniEvent()
MouseEvents MouseEvent iniMouseEvent()
UIEvents UIEvent iniUIEvent()
Nachdem Sie das Event-Objekt mit dieser Methode erstellt haben, muss das Objekt mit der in der obigen Tabelle gezeigten Initialisierungsmethode initialisiert werden. Weitere Informationen zu Initialisierungsmethoden finden Sie in der Ereignisobjektreferenz.
Diese Methode wird eigentlich nicht durch die Document-Schnittstelle definiert, sondern durch die DocumentEvent-Schnittstelle. Wenn eine Implementierung das Event-Modul unterstützt, implementiert das Document-Objekt die DocumentEvent-Schnittstelle und unterstützt diese Methode.