JQuery阻止事件冒泡

時間 2019-11-11 標籤 jquery 阻止事件冒泡

冒泡事件就是點擊子節點，會向上觸發父節點，祖先節點的點擊事件。javascript

咱們在平時的開發過程當中，確定會遇到在一個div（這個div能夠是元素）包裹一個div的狀況，可是呢，在這兩個div上都添加了事件，若是點擊裏面的div咱們但願處理這個div的事件，可是呢，咱們不但願外層的div的事件也執行，這時候咱們就要用到阻止冒泡。html

通俗點來講吧，你在家裏看電視，躲在本身的小房間，可是你不但願聲音傳到隔壁父母的耳朵裏，這時候，你可能躲在被窩裏，或者牆壁的隔音效果很好，阻隔聲音能夠理解爲阻止冒泡。java

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

　　</body>spa

顯示結果3d

對應的jQuery代碼以下：code

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

當點擊小div時，會觸發大div與body 的點擊事件。點擊大div時會觸發body的點擊事件。orm

如何防止這種冒泡事件發生呢？htm

修改以下：blog

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

有時候點擊提交按鈕會有一些默認事件。好比跳轉到別的界面。可是若是沒有經過驗證的話，就不該該跳轉。這時候能夠經過設置event.preventDefault(); //阻止默認行爲 ( 表單提交 )。

html部分

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

//阻止默認行爲 ( 表單提交 )
                    event.preventDefault();

還有一種防止默認行爲的方法就是return false。效果同樣。

代碼以下：

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

同理，上面的冒泡事件也能夠經過return 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;
        });
    });