什么是事件冒泡？

事件冒泡就是當父元素和子元素存在同一事件時在子元素的事件處理程序中會自動調用其父級元素的事件處理程序。

demo：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>事件冒泡</title>
    <script src="jquery-1.8.3.min.js"></script>
    <script>
        $(function () {
            $("#div").click(function () {
                $(this).text("我是div");
            });
            $("#img").click(function () {
                $(this).parent().css("border", "1px solid red");
            });
        })
    </script>
</head>
<body>
    <div id="div">
        <img id="img" src="images/gd.jpg" />
    </div>
</body>
</html>

當點擊div下的img元素時界面效果如圖：

通過上面代碼我們只是想當鼠標點擊圖片時讓div的邊框成紅色並沒有要刪除圖片，但他在執行子元素（img)的事件處理程序時自動調用了父級元素（div）這就是事件冒泡。

如何取消事件冒泡？

事件冒泡是可以由程序員手工取消的也就是在子元素的事件處理程序中手動的停止調用父級元素

demo：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>事件冒泡</title>
    <script src="jquery-1.8.3.min.js"></script>
    <script>
        $(function () {
            $("#div").click(function () {
                $(this).text("我是div");
            });
            $("#img").click(function () {
                $(this).parent().css("border", "1px solid red");  event.stopPropagation();

            });
        })
        </script>
</head>
<body>
    <div id="div">
        <img id="img" src="images/gd.jpg" />
    </div>
</body>
</html>

如上所示代碼就可以取消事件冒泡

demo：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>事件冒泡</title>
    <script src="jquery-1.8.3.min.js"></script>
    <script>
        $(function () {
            $("#div").click(function () {
                if( event.target == event.currentTarget){
                    $(this).text("我是div");
            }
            });
            $("#img").click(function () {
                if( event.target == event.currentTarget){
                $(this).parent().css("border", "1px solid red");
                }
            });
        })

    </script>
</head>
<body>
    <div id="div">
        <img id="img" src="images/gd.jpg" />
    </div>
</body>
</html>

這種方法也能解決上述問題單其並沒有停止事件冒泡他判斷其事件的觸發元素和當前元素是否是同一個元素如果是則執行處理代碼，如果不是則不執行處理代碼，但事件還是會逐級向上冒泡直到body元素為止

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JQuery中阻止事件冒泡方式及其區別 jQuery之防止冒泡事件 jquery 阻止冒泡事件 JQuery阻止事件冒泡 jQuery阻止事件冒泡 js中什么是事件冒泡？ css 中的事件冒泡 jQuery中的事件處理(阻止事件冒泡、阻止默認行為) Javascript中的事件冒泡與捕獲 vue中怎么阻止事件冒泡和默認事件