jQuery empêche l'analyse des instances de bouillonnement d'événements-js tutoriel-php.cn

jQuery empêche l'analyse des instances de bouillonnement d'événements

不言

Libérer： 2018-07-03 14:12:59

original

1489 Les gens l'ont consulté

Cet article présente principalement la méthode de jQuery pour empêcher le bouillonnement d'événements. Il analyse le principe et les méthodes de mise en œuvre courantes de jQuery pour empêcher le bouillonnement d'événements sous forme d'exemples. Il analyse également les compétences opérationnelles associées de jQuery pour empêcher le bouillonnement d'événements. sous forme d'exemples complets. , Les amis qui en ont besoin peuvent se référer à

Cet article décrit l'exemple de jQuery empêchant le bouillonnement d'événements. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Dans notre processus de développement habituel, nous rencontrerons certainement la situation d'envelopper un p dans un p (ce p peut être un élément cependant, entre ceux-ci). deux événements ont été ajoutés à chaque p. Si vous cliquez sur le p à l'intérieur, nous voulons traiter l'événement de ce p. Cependant, nous ne voulons pas que l'événement du p externe soit exécuté pour le moment. éviter les bulles.

Pour le dire en termes simples, vous regardez la télévision à la maison et vous vous cachez dans votre propre petite pièce, mais vous ne voulez pas que le son atteigne les oreilles de vos parents d'à côté. peut se cacher sous la couette ou contre le mur. L'effet d'isolation phonique est très bon, le blocage du son peut être compris comme empêchant les bulles.

Trois façons d'empêcher le bouillonnement d'événements

1 return false : Les événements par défaut et les événements bouillonnants peuvent être bloqués

2. Sous IEevent.stopPropagation : peut bloquer les événements bouillonnants mais autoriser les événements par défautevent.cancelBubble = true;

/Sous IEevent.preventDefault(); : peut bloquer les événements par défaut mais autoriser les événements bouillonnantsevent.returnValue = false

Les trois méthodes ci-dessus. sont utilisés dans différents scénarios et peuvent être utilisés de manière raisonnable. Voici le code. Vous pouvez effectuer quelques tests vous-même :

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>jQuery阻止冒泡</title>
  <style>
    .p1{
      width: 140px;
      border: 1px solid blue;
    }
    .p2{
      width: 100px;
      height: 100px;
      margin: 20px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
<p class="p1">
  <p class="p2">
    点我呀！！！！
  </p>
</p>
<a href="http:www.baidu.com" rel="external nofollow" id="a1">百度</a>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
  $(&#39;.p1&#39;).bind(&#39;click&#39;,function(){
    alert("p1");
  });
  $(&#39;.p2&#39;).bind(&#39;click&#39;,function(){
    alert("p2");
//    return false;//也可以通过return false 阻止冒泡
    if(window.event){//IE下阻止冒泡
      event.cancelBubble = true;
    }else{
      event.stopPropagation();
    }
  });
  $(&#39;#a1&#39;).bind(&#39;click&#39;,function(){
    if(window.event){//IE下阻止默认事件
      event.returnValue = false;
    }else{
      event.preventDefault();
    }
    alert("我是链接");
    //return false;//如果不添加任何阻止事件，先弹框，后跳转，我们可以通过return false阻止跳转
  });
</script>
</body>
</html>

Copier après la connexion

Résultats en cours d'exécution :

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !