JQuery verhindert, dass Ereignisse sprudeln-js-Tutorial-php.cn

JQuery verhindert, dass Ereignisse sprudeln

高洛峰

Freigeben： 2016-11-16 13:03:44

Original

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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();    //  阻止事件冒泡
        });
    });

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

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