Le mécanisme de bulle JS fait référence à un élément définit l'événement A, comme un événement de clic.
Comme indiqué dans l'exemple suivant:
La copie de code est la suivante:
<html>
<script type = "text / javascript" src = "jQuery-1.7.1.js"> </ script>
<cript>
fonction iAlertDouble (e) {
alert («innerdouble»);
BUBUBBLE (E);
}
fonction iAlertTHree (e) {
alert («innertre»);
stopbubbledouble (e);
}
fonction stopbubble (e) {
var evt = e || window.event;
evt.stoppropagation? evt.stoppropagation () :( evt.cancelbubble = true); // empêche les bulles d'être gonflées;
}
fonction stopbubbledouble (e) {
var evt = e || window.event;
evt.stoppropagation? evt.stoppropagation () :( evt.cancelbubble = true); // empêche les bulles d'être gonflées;
evt.preventDefault (); // bloque le comportement par défaut du navigateur afin que le lien ne saute pas
}
$ (function () {
// Méthode 1
//$ poursuit
// alert ('innerfour');
// event.Stoppropagation ();
// event.preventDefault ();
//});
// Méthode 2
$ ('# jQueryTest'). Cliquez sur (fonction () {
alert ('innerfour');
retourne false;
});
});
</cript>
<div onclick = "alert ('without');"> sans
<div onclick = "alert ('middle');"> Middle
<div onclick = "alert ('inner');"> Inner </div>
<div onclick = "ialertDouble (événement)"> innerdouble </div>
<p> <a href = 'http: //www.baidu.com' onclick = "iaalertTe (événement)"> innerTre </a> </p>
<p id = 'jQueryTest'> <a href = 'http: //www.baidu.com'> innerfour </a> </p>
</div>
</div>
</html>
Lorsque vous cliquez sur Inner, «Inner», «Middle» et «Without» apparaîtront à leur tour. Ceci est la bulle d'événement.
Intuitivement parlant, c'est le cas, car la zone la plus intérieure est dans le nœud parent.
En fait, plusieurs fois, nous ne voulons pas que les événements bouillonnent, car cela déclenchera plusieurs événements en même temps.
Suivant: cliquez sur InnerDouble. Vous constaterez qu'elle n'est pas bouillonnante parce qu'elle a appelé la méthode stopbubble () dans la méthode appelée iaLertDouble ().
Mais s'il s'agit d'un lien, nous constaterons qu'il empêchera également les bulles, mais il sautera, ce qui est le comportement par défaut du navigateur. Il doit être bloqué en utilisant la méthode empêchée dedEfault (). Pour plus de détails, vous pouvez vérifier iAlertThere ().
À l'heure actuelle, les personnes grand public utilisent jQuery pour lier les événements de clic, ce qui est beaucoup plus simple.
Nous pouvons passer dans l'événement paramètre lorsque vous cliquez sur l'événement, puis directement
event.stoppropagation ();
event.preventDefault ();
C'est tout.
Le cadre est bon, mais en fait, il y en a un plus simple.
[Voir le code détaillé ci-dessus, n'oubliez pas de charger jQuery.js. 】
En fait, vous pouvez également ajouter des jugements à chaque événement de clic:
La copie de code est la suivante:
$ ('# id'). Cliquez sur (fonction (événement) {
if (event.target == this) {
// faire quelque chose
}
})
Analyse: L'événement variable du gestionnaire d'événements enregistre l'objet de l'événement. La propriété Event.Target détient l'élément cible de l'événement. Cette propriété est spécifiée dans l'API DOM, mais n'est pas implémentée par tous les navigateurs. JQuery fait les extensions nécessaires à cet objet d'événement afin que cette propriété puisse être utilisée dans n'importe quel navigateur. Avec .target, il est possible de déterminer l'élément du DOM qui reçoit d'abord l'événement (c'est-à-dire l'élément qui est réellement cliqué). De plus, nous savons que cela fait référence à l'élément DOM qui gère les événements, afin que nous puissions écrire le code ci-dessus.
Cependant, il est recommandé d'utiliser Return False, si jQuery lie les événements.