Il y a des problèmes de bulles d'événements et de capture d'événements dans les événements JavaScript et JQuery. Ce qui suit est un résumé détaillé des deux problèmes et de leurs solutions.
Les bulles d'événements sont un processus de bulles des enfants aux nœuds d'ancêtre;
La capture de l'événement est tout le contraire et est un processus des nœuds ancêtres aux nœuds d'enfants.
Donnez un exemple d'événement JQuery Click:
Le code est le suivant:
La copie de code est la suivante:
<! Doctype html>
<meta charset = "utf-8">
<Title> Test </Title>
<adal>
<script src = "http://code.jquery.com/jquery-latest.js"> </ script>
<script type = "text / javascript">
$ (function () {
$ ('# clickme'). Cliquez sur (fonction () {
alert ('bonjour');
});
$ ('body'). Cliquez sur (fonction () {
alerte ('bébé');
});
});
</cript>
</ head>
<body>
<div>
<Button Type = "Button" ID = "Button2"> Cliquez sur moi </fruton>
<Button id = "ClickMe"> Cliquez sur </ Button>
</div>
</docy>
</html>
Phénomène de bulle d'événements: cliquez sur le bouton de "id = clickme" et deux boîtes contextuelles, "bonjour" et "bébé" apparaîtra les uns après les autres.
Analyse: En cliquant sur le bouton "ID = ClickMe", l'événement de clic lié au bouton et aux éléments du parent du bouton et du corps est déclenché, donc deux cases apparaissent les unes après les autres, et le phénomène dit de bulle se produit.
Phénomène de capture d'événements: si vous cliquez sur le div et le bouton qui ne lie pas l'événement de clic, la boîte de dialogue "bébé" apparaîtra.
Dans les projets réels, nous voulons empêcher les bulles d'événements et la capture d'événements.
Comment empêcher les événements de bouillonner:
Méthode 1: Retourne False dans l'événement de clic actuel;
La copie de code est la suivante:
$ ('# clickme'). Cliquez sur (fonction () {
alert ('bonjour');
retourne false;
});
Méthode 2:
La copie de code est la suivante:
$ ('# clickme'). Cliquez sur (fonction (événement) {
alert ('bonjour');
var e = window.event || événement;
if (e.stoppropagation) {// Si un objet d'événement est fourni, alors il s'agit d'un navigateur non IE
e.stoppropagation ();
}autre{
// moyen compatible pour annuler la bulle d'événement
window.event.cancelbubble = true;
}
});
Il semble que l'événement de capture ne peut pas être bloqué