Empêcher la propagation d'un événement avec jQuery stopPropagation

Mars 2013

Lorsqu'un événement est déclenché sur un élément, celui-ci va remonter dans chacun des parents de cet élément jusqu'au <body>, puis document et enfin window.

Dans certains cas, ce comportement est gênant, heureusement on peut le désactiver grâce à la fonction stopPropagation(). Cette fonction s'utilise sur un événement, lorsqu'on l'appelle, l'événement ne remontera pas aux noeuds parents, sa propagation est stoppée net à l'élément courant.

Voici un petit exemple avec un bouton "Fire" qui se trouve dans 3 div imbriquées :

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<style>
	#rouge{padding:26px; background-color:hsl(0, 68%, 67%); float:left;}
	#vert {padding:26px; background-color:hsl(82, 80%, 43%);}
	#bleu {padding:20px; background-color:hsl(216, 82%, 64%);}
	
	#rouge.highlight{background-color:hsl(0,   100%, 50%);}
	#vert.highlight {background-color:hsl(82,  100%, 50%);}
	#bleu.highlight {background-color:hsl(216, 100%, 50%);}
	</style>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
	<div id="rouge">
		<div id="vert">
			<div id="bleu">
				<button id="fire">Fire !</button>
			</div>
		</div>
	</div>
</body>
</html>

En ajoutant un peu de javascript avec jQuery, on peut voir comment l'événement correspondant au clic sur le bouton Fire remonte à travers tous les parents : bleu, puis vert, puis rouge :

jQuery(function($){
	$('#fire, #rouge, #vert, #bleu').click(function(e){
		$(this).addClass('highlight');
		alert( $(this).attr('id') );
		$(this).removeClass('highlight');
	});
});

Maintenant imaginons qu'on souhaite que la propagation de l'événement click s'arrête au niveau du div bleu, c'est très facile, il suffit de créer un handler pour le clic sur le div bleu, dans lequel on va demander à jQuery de ne pas propager l'événement aux parents :

jQuery(function($){
	$('#fire, #rouge, #vert, #bleu').click(function(e){
		$(this).addClass('highlight');
		alert( $(this).attr('id') );
		$(this).removeClass('highlight');
	});
	
	$('#bleu').click(function(e){
		e.stopPropagation();
	});
});

Si vous voulez en savoir plus c'est par ici : mettre un texte en gras sur excel en vba.

Différence entre stopPropagation et stopImmediatePropagation

stopPropagation empêche la propagation de l'événement aux parents de l'élément, mais pas aux autres handler de l'élément.

Imaginons par exemple un lien auquel on attache 2 handler : un premier sur l'événement click, et un second sur l'événement mouseup. MouseUp est plus générique que click : il se déclenche lorsque n'importe quel bouton de la souris est cliqué, alors que click ne se déclenche qu'au clic gauche.

Maintenant si un clic gauche survient sur le lien, les 2 handler seront appelés. stopImmediatePropagation fait la même chose que stopPropagation mais permet en plus d'empêcher l'exécution des autres handler.

Découvrez ce tutoriel photoshop : créez une icône en 3d à lire tout de suite !

Fil de lecture

0 commentaire