Verwenden Sie JQuery, um das Sprudeln von Ereignissen zu verhindern-js-Tutorial-php.cn

Verwenden Sie JQuery, um das Sprudeln von Ereignissen zu verhindern

高洛峰

Freigeben： 2016-12-03 09:08:23

Original

986 Leute haben es durchsucht

Das Blasenereignis besteht darin, auf den untergeordneten Knoten zu klicken, wodurch das Klickereignis des übergeordneten Knotens und des Vorfahrenknotens nach oben ausgelöst wird.

In unserem üblichen Entwicklungsprozess werden wir definitiv auf die Situation stoßen, ein Div in ein Div einzuschließen (dieses Div kann jedoch ein Element sein). Wenn wir darauf klicken, möchten wir das verarbeiten Ereignisse dieses Divs innerhalb des Divs, aber wir möchten nicht, dass auch die Ereignisse des äußeren Divs ausgeführt werden. Zu diesem Zeitpunkt müssen wir verwenden, um ein Sprudeln zu verhindern.

Laienhaft ausgedrückt: Sie schauen zu Hause fern und verstecken sich in Ihrem eigenen kleinen Zimmer, aber Sie möchten nicht, dass der Ton die Ohren Ihrer Eltern nebenan erreicht kann sich unter der Steppdecke oder an der Wand verstecken. Die Schalldämmwirkung ist sehr gut, das Blockieren von Schall kann als Verhindern von Blasenbildung verstanden werden.

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

Nach dem Login kopieren

Ergebnisse anzeigen

Verwenden Sie JQuery, um das Sprudeln von Ereignissen zu verhindern

Der entsprechende jQuery-Code lautet wie folgt:

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

Nach dem Login kopieren

Wenn auf das kleine Div geklickt wird, Das große Div wird durch Klickereignisse auf Div und Body ausgelöst. Wenn auf das große Div geklickt wird, wird das Klickereignis des Körpers ausgelöst.

Wie kann verhindert werden, dass diese Art von Blasenbildung auftritt?

Ändern Sie es wie folgt:

event.stopPropagation(); // Verhindern Sie, dass Ereignisse sprudeln

Manchmal gibt es einige Standardereignisse, wenn Sie auf die Schaltfläche „Senden“ klicken. Springen Sie beispielsweise zu einer anderen Schnittstelle. Aber wenn es die Überprüfung nicht besteht, sollte es nicht springen. Zu diesem Zeitpunkt können Sie event.preventDefault(); //Verhindern Sie das Standardverhalten (Formularübermittlung).

HTML-Teil

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

Nach dem Login kopieren

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

Nach dem Login kopieren

//Standardverhalten verhindern (Formularübermittlung)
event.preventDefault(); Eine weitere Möglichkeit, Standardverhalten zu verhindern, ist die Rückgabe von false . Der Effekt ist der gleiche.

Der Code lautet wie folgt:

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

Nach dem Login kopieren

In ähnlicher Weise kann das obige Blasenereignis auch durch die Rückgabe von false behandelt werden.

<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;
  });
 });

Nach dem Login kopieren