Utilisez JQuery pour empêcher les événements de se propager-js tutoriel-php.cn

Utilisez JQuery pour empêcher les événements de se propager

高洛峰

Libérer： 2016-12-28 10:27:24

original

963 Les gens l'ont consulté

L'événement bouillonnant consiste à cliquer sur le nœud enfant, ce qui déclenchera l'événement de clic du nœud parent et du nœud ancêtre vers le haut.

Dans notre processus de développement habituel, nous rencontrerons certainement la situation d'envelopper un div dans un div (ce div peut être un élément. Cependant, si vous cliquez dessus, nous voulons gérer le). les événements de ce div à l'intérieur du div, mais nous ne voulons pas que les événements du div externe soient également exécutés. À ce stade, nous devons utiliser pour é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.

<style>
  #content{
   width: 140px;
   border: 1px solid blue;
  }
  #msg{
   width: 100px;
   height: 100px;
   margin: 20px;
   border: 1px solid red;
  }
</style>
　　<body>
 　<div id="content">
  外层div
 <div id="msg">
   内层div
 </div>
 </div>
　　</body>

Copier après la connexion

Afficher les résultats

Utilisez JQuery pour empêcher les événements de se propager

Le code jQuery correspondant est le suivant :

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
 <script type="text/javascript">
 $(function(){
  // 为内层div绑定click事件
  $("#msg").click(function(){
   alert("我是小div");
  });
  // 为外层div元素绑定click事件
  $("#content").click(function(){
   alert("我是大div");
  });
  // 为body元素绑定click事件
  $("body").click(function(){
   alert("我是body");
  });
 });
 </script>

Copier après la connexion

Lorsqu'un petit div est cliqué, un grand div sera déclenché des événements de clic sur div et body. Lorsque le grand div est cliqué, l'événement de clic du corps sera déclenché.

Comment éviter que ce genre d'événement bouillonnant ne se produise ?

Modifiez comme suit :

event.stopPropagation(); // Empêche les événements de bouillonner

Parfois, il y a des événements par défaut lorsque vous cliquez sur le bouton Soumettre. Par exemple, passez à une autre interface. Mais s’il échoue à la vérification, il ne devrait pas sauter. À ce stade, vous pouvez définir event.preventDefault(); //Empêcher le comportement par défaut (soumission de formulaire).

partie HTML

<body>
  <form action="test.html">
   用户名：<input type="text" id="username" />
   <br/>
   <input type="submit" value="提交" id="sub"/>
  </form>
 </body>

Copier après la connexion

Utilisez JQuery pour empêcher les événements de se propager

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
 <script type="text/javascript">
  $(function(){
   $("#sub").click(function(event){
    //获取元素的值，val() 方法返回或设置被选元素的值。
    var username = $("#username").val(); 
    //判断值是否为空
    if(username==""){ 
     //提示信息
     //alert("文本框的值不能为空");
     $("#msg").html("<p>文本框的值不能为空.</p>"); 
     //阻止默认行为 ( 表单提交 )
     event.preventDefault(); 
    }
   });
  });
 </script>

Copier après la connexion

//Empêcher le comportement par défaut (soumission du formulaire)
Une autre façon d'empêcher le comportement par défaut est de retourner FAUX. L'effet est le même.

Le code est le suivant :

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
 <script type="text/javascript">
  $(function(){
   $("#sub").click(function(event){
    //获取元素的值，val() 方法返回或设置被选元素的值。
    var username = $("#username").val(); 
    //判断值是否为空
    if(username==""){ 
     //提示信息
     //alert("文本框的值不能为空");
     $("#msg").html("<p>文本框的值不能为空.</p>"); 
     //阻止默认行为 ( 表单提交 )
     //event.preventDefault(); 
     return false;
    }
   });
  });
 </script>

Copier après la connexion

De même, l'événement bouillonnant ci-dessus peut également être géré en renvoyant false.

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
 <script type="text/javascript">
 $(function(){
  // 为内层div绑定click事件
  $("#msg").click(function(event){
   alert("我是小div");
   //event.stopPropagation(); // 阻止事件冒泡
    return false;
  });
  // 为外层div元素绑定click事件
  $("#content").click(function(event){
   alert("我是大div");
   //event.stopPropagation(); // 阻止事件冒泡
     return false;
  });
  // 为body元素绑定click事件
  $("body").click(function(event){
   alert("我是body");
   //event.stopPropagation(); // 阻止事件冒泡
    return false;
  });
 });

Copier après la connexion

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde. J'espère également qu'il y aura plus de sites Web PHP chinois !

Pour plus d'articles sur l'utilisation de JQuery pour empêcher le bouillonnement d'événements, veuillez faire attention au site Web PHP chinois !