Es gibt Probleme mit Ereignisblasen und Ereigniserfassung in JavaScript- und JQuery -Ereignissen. Das Folgende ist eine detaillierte Zusammenfassung der beiden Probleme und ihrer Lösungen.
Ereignisblasen sind ein Prozess von Blasen von Kindern bis hin zu Vorfahrknoten;
Die Ereigniserfassung ist genau das Gegenteil und ein Prozess von Vorfahrenknoten bis hin zu Kinderknoten.
Geben Sie ein Beispiel für ein JQuery -Click -Ereignis:
Der Code ist wie folgt:
Die Codekopie lautet wie folgt:
<! DocType html>
<meta charset = "utf-8">
<title> test </title>
<kopf>
<script src = "http://code.jquery.com/jquery-latest.js"> </script>
<script type = "text/javaScript">
$ (function () {
$ ('#klickme'). click (function () {
alarm ('Hallo');
});
$ ('body'). click (function () {
alarm ('Baby');
});
});
</script>
</head>
<body>
<div>
<button type = "button" id = "button2"> klicken Sie auf mich </button>
<Schaltfläche ID = "ClickMe"> klick </schaltet>
</div>
</body>
</html>
Ereignisblase Phänomen: Klicken Sie auf die Schaltfläche "ID = ClickMe", und zwei Popup-Boxen werden nacheinander "Hallo" und "Baby" angezeigt.
Analyse: Wenn Sie auf die Schaltfläche "ID = ClickMe" klicken, wird das an die Schaltfläche und die übergeordnete Elemente und den Körper ausgelöste Klickereignis ausgelöst, sodass zwei Kästchen nacheinander auftauchen und das sogenannte Blasenphänomen auftritt.
Ereigniserfassung Phänomen: Wenn Sie auf die DIV und die Schaltfläche klicken, die das Klickereignis nicht binden, wird das Dialogfeld "Baby" angezeigt.
In den tatsächlichen Projekten möchten wir Ereignisblasen und Event -Capture verhindern.
Wie man verhindern, dass Ereignisse sprudeln:
Methode 1: Return FALSE im aktuellen Klickereignis;
Die Codekopie lautet wie folgt:
$ ('#klickme'). click (function () {
alarm ('Hallo');
false zurückgeben;
});
Methode 2:
Die Codekopie lautet wie folgt:
$ ('#clickme'). Click (Funktion (Ereignis) {
alarm ('Hallo');
var e = window.event || Ereignis;
if (e.StopPropagation) {// Wenn ein Ereignisobjekt bereitgestellt wird, ist dies ein Nicht-I-Browser
E.Stoppropagation ();
}anders{
// dh kompatible Möglichkeit, die Ereignisblase abzusagen
window.event.cancelBubble = true;
}
});
Es scheint, dass das Capture -Ereignis nicht blockiert werden kann