日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網(wǎng)站首頁 編程語言 正文

stopPropagation是什么意思以及什么是事件的原理

作者：zhen12321 更新時間： 2022-01-01 編程語言 
 <style>
        .div1 {
            width: 200px;
            height: 200px;
            background-color: bisque;
        }

        .div2 {
            width: 100px;
            height: 100px;
            background-color: coral;

        }

        .div3 {
            width: 50px;
            height: 50px;
            background-color: crimson;
        }

        .div4 {
            width: 20px;
            height: 20px;
            background-color: purple;
        }

        div {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
</head>

<body>
    <div class="div1">1
        <div class="div2">2
            <div class="div3">3
                <div class="div4">4</div>
            </div>
        </div>
    </div>

    <script>
        // 獲取三個div,用于后續(xù)對div進行dom操作，主要針對事件。注意這三個div是有層級關系的。
        var div1 = document.querySelector(".div1");
        var div2 = document.querySelector(".div2");
        var div3 = document.querySelector(".div3");
        var div4 = document.querySelector(".div4");

        // 給每個div都添加監(jiān)聽事件。嘗試著捕獲階段
        // 事件監(jiān)聽第三個參數(shù)默認不寫為冒泡階段攔截，
        // 如果為true,則為捕獲截斷攔截。
        // 如果為false，則為冒泡截斷攔截。false是默認值。
        div1.addEventListener("click", clickhandler1);
        div2.addEventListener("click", clickhandler2, true);
        div3.addEventListener("click", clickhandler3, true);
        div4.addEventListener("click", clickhandler4, true);


        //當調用這個函數(shù)時，打印對應的字符串
        function clickhandler1(e) {
            console.log('1');
        }

        function clickhandler2(e) {
            console.log('2');

        }

        function clickhandler3(e) {
            console.log('3');
            e.stopPropagation();
        }

        function clickhandler4(e) {
            console.log('4');
        }
</script>

在這里插入圖片描述
1.如果stopPropagation方法給的元素是捕獲，那么阻止的就是捕獲。
否則，阻止的就是冒泡。
2.點擊誰，誰就是目標。每一次都是先從捕獲階段->目標->冒泡階段考慮。如果中間達不到目標，那么后面就失敗，不去執(zhí)行。

例子1

1是冒泡，2，3，4是捕獲。
在3截斷,點擊4：
分析：
1).4是目標，所以1->2->3->4。
2).3是阻斷，3是捕獲階段阻斷，所以阻斷的是3的捕獲截斷。
3).所以點擊4，只能從1->2->3，進入不了4，然后后面的失敗。捕獲2和3.

例子2

2和4是捕獲，1和3是冒泡。阻斷3，點擊4:
1).4是目標，所以從1，2，3，4進入。
2).在3處截斷，3是冒泡，所以阻止3冒泡。所以
1->2->3->4->3.
3).先輸出捕獲的，再輸出冒泡的。
輸出2,4,3.

如果想訪問更多，請訪問這篇大佬的博客

原文鏈接：https://blog.csdn.net/u010563350/article/details/122093814

欄目分類
最近更新