Heim > Artikel > Web-Frontend > JQuery verhindert, dass Ereignisse sprudeln

JQuery verhindert, dass Ereignisse sprudeln

高洛峰Original: 2016-11-16 13:03:441056Durchsuche

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 zu verpacken (dieses Div kann ein Element sein). Wenn wir darauf klicken, werden Ereignisse hinzugefügt 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 Verhinderung 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>

JQuery verhindert, dass Ereignisse sprudeln

Ergebnisse anzeigen

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

<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();    //  阻止事件冒泡
        });
     // 为外层div元素绑定click事件
        $("#content").click(function(event){
            alert("我是大div");
            event.stopPropagation();    //  阻止事件冒泡
        });
        // 为body元素绑定click事件
        $("body").click(function(event){
            alert("我是body");
            event.stopPropagation();    //  阻止事件冒泡
        });
    });

event.stopPropagation(); // Ereignissprudeln verhindern

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>

JQuery verhindert, dass Ereignisse sprudeln

<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, besteht darin, „false“ zurückzugeben. 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：Detaillierte Erläuterung der JavaScript-VererbungsmethodeNächster Artikel：Detaillierte Erläuterung der JavaScript-Vererbungsmethode

In Verbindung stehende Artikel

Mehr sehen