recherche

Maison >interface Web >js tutoriel >Un petit exemple explique comment empêcher les événements Jquery de bubbling_jquery

Un petit exemple explique comment empêcher les événements Jquery de bubbling_jquery

WBOY
WBOYoriginal
2016-05-16 16:41:42936parcourir

Qu'est-ce que l'événement JS bouillonne ?

Déclenchez un certain type d'événement sur un objet (comme un événement onclick). Si l'objet définit un gestionnaire pour cet événement, alors cet événement appellera ce gestionnaire si ce gestionnaire d'événement n'est pas défini ou si l'événement renvoie vrai. , alors cet événement se propagera à l'objet parent de cet objet, de l'intérieur vers l'extérieur, jusqu'à ce qu'il soit traité (tous les événements similaires de l'objet parent seront activés), ou qu'il atteigne le niveau supérieur de la hiérarchie des objets, c'est-à-dire l'objet document (Certains navigateurs sont des fenêtres).

Comment empêcher les événements Jquery de bouillonner ?

Expliquez avec un petit exemple 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>Porschev---Jquery 事件冒泡</title> 

<script src="jquery-1.3.2-vsdoc.js" type="text/javascript"></script> 

</head> 
<body> 
<form id="form1" runat="server"> 
<div id="divOne" onclick="alert('我是最外层');"> 
<div id="divTwo" onclick="alert('我是中间层！')"> 
<a id="hr_three" href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" mce_href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" onclick="alert('我是最里层！')">点击我</a> 
</div> 
</div> 
</form> 
</body> 
</html>


Par exemple, la page ci-dessus,
Divisé en trois couches : divOne est la couche externe, divTwo est la couche intermédiaire et hr_two est la couche la plus interne
 ; Ils ont tous leurs propres événements de clic, et la balise la plus interne a également des attributs href.

Exécutez la page, cliquez sur "Cliquez sur moi", et elle apparaîtra : Je suis la couche la plus interne ----> Je suis la couche intermédiaire ----> Je suis la couche la plus externe
---->Ensuite, créez un lien vers Baidu.

Il s'agit d'un bouillonnement d'événement. À l'origine, je cliquais uniquement sur l'étiquette portant l'ID hr_trois, mais trois opérations d'alerte ont été exécutées.
Processus de diffusion d'événements (représenté par l'ID de balise) : hr_trois----> divTwo----> Bouillonnant de la couche la plus interne à la couche la plus externe.

Comment l'arrêter ?

1.event.stopPropagation();

<script type="text/javascript">
$(function() {
$("#hr_three").click(function(event) {
event.stopPropagation();
});
});
<script>

Cliquez à nouveau sur "Cliquez sur moi", cela apparaîtra : je suis la couche la plus interne, puis créez un lien vers Baidu

2.return false;

Si le code suivant est ajouté à l'en-tête

<script type="text/javascript">
$(function() {
$("#hr_three").click(function(event) {
return false;
});
});
<script>


Cliquez à nouveau sur "Cliquez sur moi" et une pop-up apparaîtra : je suis la couche la plus interne, mais le lien vers la page Baidu ne sera pas exécuté

Cela se voit à partir de ceci :

1.event.stopPropagation();

Pendant le traitement des événements, le bouillonnement d'événements est empêché, mais le comportement par défaut n'est pas bloqué (il exécute le saut du lien hypertexte)

2.return false ;

Pendant le traitement des événements, la propagation des événements et le comportement par défaut sont empêchés (par exemple, il n'a pas exécuté le saut de lien hypertexte pour l'instant)

Il y en a un autre lié au bouillonnement :

3.event.preventDefault();

Si vous le mettez dans l'événement click de la balise d'en-tête A, cliquez sur "Cliquez sur moi".
Vous constaterez qu'il apparaît dans l'ordre : Je suis la couche la plus interne ----> Je suis la couche intermédiaire ----> Je suis la couche la plus externe, mais à la fin, elle ne saute pas à Baidu

Sa fonction est la suivante : lors du traitement des événements, il ne bloque pas le bouillonnement d'événements, mais bloque le comportement par défaut (il exécute uniquement toutes les boîtes pop-up, mais n'exécute pas les sauts d'hyperliens)

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
Article précédent：2 solutions au problème du référent manquant dans JS sautent dans les compétences IE_javascriptArticle suivant：2 solutions au problème du référent manquant dans JS sautent dans les compétences IE_javascript

Articles Liés

Voir plus