suchen

Heim  >  Artikel  >  Web-Frontend  >  Verwenden Sie JQuery, um das Sprudeln von Ereignissen zu verhindern

Verwenden Sie JQuery, um das Sprudeln von Ereignissen zu verhindern

高洛峰
高洛峰Original
2016-12-03 09:08:231039Durchsuche

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>

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>

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

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


Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：IE8-Kompatibilitätsproblem mit Jquery.validate.jsNächster Artikel：IE8-Kompatibilitätsproblem mit Jquery.validate.js

In Verbindung stehende Artikel

Mehr sehen