Maison >interface Web >js tutoriel >Explication détaillée de l'événement bouillonnant Js et blocage des compétences example_javascript
Explication détaillée de l'événement bouillonnant Js et blocage des compétences example_javascript
- WBOYoriginal
- 2016-05-16 16:54:581610parcourir
Le mécanisme de bouillonnement JS signifie que si un élément définit un événement A, tel qu'un événement de clic, et si l'événement est déclenché et que l'événement de bouillonnement n'est pas bloqué, l'événement se propagera à l'élément parent et déclenchera la fonction de clic du parent. classe.
Comme le montre l'exemple suivant :
Copiez le code Le code est le suivant :
<script> e) { <br> alert('innerdouble'); <br>stopBubble(e); <br>} <br><br>function ialerttrois(e) { <br>alert('innertrois'); stopBubbleDouble(e); <br>} <br><br>function stopBubble(e) { <br>var evt = e||window.event; <br>evt.stopPropagation?evt.stopPropagation():(evt. CancelBubble=true);/ /Arrêter de bouillonner <br>} <br><br>function stopBubbleDouble(e) { <br>var evt = e||window.event; <br>evt.stopPropagation?evt.stopPropagation() :(evt.cancelBubble =true);//Empêcher les bulles<br>evt.preventDefault();//Empêcher le comportement par défaut du navigateur afin que le lien ne saute pas<br>} <br><br>$(function( ) { <br>//Méthode 1<br>//$('#jquerytest').click(function(event) { <br>// alert('innerfour'); <br>// event.stopPropagation( ); <br>// event.preventDefault(); <br>//}); <br><br>//Méthode 2<br>$('#jquerytest').click(function() { <br>alert( 'innerfour'); <br>return false <br>}); <br></script> "> sans
milieu
< div onclick="ialertdouble(event)">innerdouble
inner
< div onclick="ialertdouble(event)">innerdouble
innerfour< /p>
Lorsque vous cliquez sur intérieur, « intérieur », « milieu » apparaîtra en séquence et « sans ». C’est un événement bouillonnant.
Intuitivement, c'est également le cas, car la zone la plus interne se trouve dans le nœud parent. Cliquer sur la zone du nœud enfant clique en fait sur la zone du nœud parent, donc l'événement le propagera. .
En fait, bien souvent, nous ne voulons pas que des événements éclatent, car cela déclencherait plusieurs événements en même temps.
Suivant : on clique sur innerdouble. Vous constaterez qu'elle ne fait pas de bulle car elle appelle la méthode stopBubble() dans la méthode appelante ialertdouble(). La méthode empêche le bulle en déterminant le type de navigateur (c'est-à-dire qu'elle utilise cancleBubble(), Firefox utilise stopProgation()).
Mais s'il s'agit d'un lien, nous constaterons qu'il empêchera également le bullage, mais sautera. C'est le comportement par défaut du navigateur. Vous devez utiliser la méthode PreventDefault() pour l'empêcher. Voir ialerttrois() pour plus de détails.
Actuellement, la méthode courante consiste à utiliser jquery pour lier les événements de clic. Dans ce cas, ce sera beaucoup plus simple.
On peut passer le paramètre event en cliquant sur l'événement, puis directement
event.stopPropagation(
event.preventDefault(); //Pas besoin d'ajouter ceci if il n'y a pas de lien.
C'est tout.
Le framework est bon, mais il existe en fait un moyen plus simple, en renvoyant false dans le gestionnaire d'événements. Il s'agit d'un moyen abrégé d'appeler stopPropagation() et PreventDefault() sur l'objet événement en même temps.
[Voir le code détaillé ci-dessus, pensez à charger jquery.js. ]
En fait, vous pouvez également ajouter un jugement à chaque événement de clic :
Copier le code
Le code est tel suit : $('#id').click(function(event){ if(event.target==this){
//faire quelque chose }
})
Analyse : La variable événement dans le gestionnaire d'événements stocke l'objet événement. L'attribut event.target stocke l'élément cible où l'événement s'est produit. Cet attribut est spécifié dans l'API DOM, mais n'est pas implémenté par tous les navigateurs. jQuery apporte les extensions nécessaires à cet objet événement afin que cette propriété puisse être utilisée dans n'importe quel navigateur. Avec .target, vous pouvez déterminer l'élément du DOM qui a reçu l'événement en premier (c'est-à-dire l'élément sur lequel on a réellement cliqué). De plus, nous savons que cela fait référence à l'élément DOM qui gère l'événement, nous pouvons donc écrire le code ci-dessus.
Cependant, il est recommandé d'utiliser return false si Jquery lie des événements.
})
Analyse : La variable événement dans le gestionnaire d'événements stocke l'objet événement. L'attribut event.target stocke l'élément cible où l'événement s'est produit. Cet attribut est spécifié dans l'API DOM, mais n'est pas implémenté par tous les navigateurs. jQuery apporte les extensions nécessaires à cet objet événement afin que cette propriété puisse être utilisée dans n'importe quel navigateur. Avec .target, vous pouvez déterminer l'élément du DOM qui a reçu l'événement en premier (c'est-à-dire l'élément sur lequel on a réellement cliqué). De plus, nous savons que cela fait référence à l'élément DOM qui gère l'événement, nous pouvons donc écrire le code ci-dessus.
Cependant, il est recommandé d'utiliser return false si Jquery lie des événements.
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn