Der JS -Blasenmechanismus bezieht sich darauf, ob ein Element Ereignis A wie ein Klickereignis definiert.
Wie im folgenden Beispiel gezeigt:
Die Codekopie lautet wie folgt:
<html>
<script type = "text/javaScript" src = "jQuery-1.7.1.js"> </script>
<Script>
Funktion ialertDouble (e) {
alarm ('InnerDouble');
Stopbubble (e);
}
Funktion ialertThree (e) {
ALERT ('InnerThree');
Stopbubbledouble (e);
}
Funktion stopbubble (e) {
var evt = e || window.event;
evt.StopPropagation?
}
Funktion stopbubbledouble (e) {
var evt = e || window.event;
evt.StopPropagation?
evt.preventDefault (); // Blockieren Sie das Standardverhalten des Browsers, damit der Link nicht springt
}
$ (function () {
// Methode 1
//$('#jQueryTest').click(Function(event) {
// alarm ('innerfour');
// Event.StopPropagation ();
// event.preventDefault ();
//});
// Methode 2
$ ('#jQueryTest'). Click (function () {
alarm ('innerfour');
false zurückgeben;
});
});
</script>
<div onclick = "alert ('ohne');"> ohne
<div onclick = "alert ('Middle');"> Mitte
<div onclick = "alert ('inner');"> Inner </div>
<div onclick = "ialertDouble (Ereignis)"> InnerDouble </div>
<p> <a href = 'http: //www.baidu.com' onclick = "ialertThree (Ereignis)"> InnerTHree </a> </p>
<p id = 'jQueryTest'> <a href = 'http: //www.baidu.com'> Innerfour </a> </p>
</div>
</div>
</html>
Wenn Sie auf innere, "innere", "Mitte" und "ohne" klicken, werden nacheinander auftauchen. Dies ist die Ereignisblase.
Intuitiv ist dies der Fall, da sich der innerste Bereich im übergeordneten Knoten befindet.
Tatsächlich möchten wir, dass Ereignisse nicht sprudeln, da dies gleichzeitig mehrere Ereignisse auslöst.
Weiter: Klicken wir auf InnerDouble. Sie werden feststellen, dass sie nicht sprudelt, weil sie die Stopbubble () -Methode in der genannten Methode ialertDouble () bezeichnet hat.
Wenn es sich jedoch um einen Link handelt, werden wir feststellen, dass es auch Blasen verhindern wird, aber es wird das Standardverhalten des Browsers sind. Es muss blockiert werden, indem die Methode von PreventDefault () verwendet wird. Für Details können Sie IialertThree () überprüfen.
Derzeit verwenden die Mainstream -Leute JQuery, um Klick -Ereignisse zu binden, was viel einfacher ist.
Wir können das Parameterereignis übergeben, wenn wir auf das Ereignis klicken, und dann direkt
Event.StopPropagation ();
Event.PreventDefault ();
Das ist alles.
Das Framework ist gut, aber tatsächlich gibt es im Ereignishandler eine einfachere.
[Siehe den detaillierten Code oben, denken Sie daran, jQuery.js zu laden. 】
Tatsächlich können Sie jedem Klick -Ereignis auch Urteile hinzufügen:
Die Codekopie lautet wie folgt:
$ ('#id'). Click (Funktion (Ereignis) {
if (event.target == this) {
// etwas mach
}
})
Analyse: Das variable Ereignis im Ereignishandler speichert das Ereignisobjekt. Die Event.Target -Eigenschaft enthält das Zielelement des Ereignisses. Diese Eigenschaft ist in der DOM -API angegeben, wird jedoch nicht von allen Browsern implementiert. JQuery erstellt die erforderlichen Erweiterungen dieses Ereignisobjekts, damit diese Eigenschaft in jedem Browser verwendet werden kann. Bei .Target ist es möglich, das Element in der DOM zu bestimmen, das zuerst das Ereignis empfängt (d. H. Das tatsächlich geklickte Element). Darüber hinaus wissen wir, dass sich dies auf das DOM -Element bezieht, das Ereignisse übernimmt, sodass wir den obigen Code schreiben können.
Es wird jedoch empfohlen, Return Falsch zu verwenden, wenn JQuery Ereignisse bindet.