Explication détaillée de l'événement bouillonnant Js et blocage des compétences example_javascript

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

inner

< div onclick="ialertdouble(event)">innerdouble

innertrois< ;/a>

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. .