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

學(xué)無(wú)先后，達(dá)者為師

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

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

作者：zhen12321 更新時(shí)間： 2022-01-01 編程語(yǔ)言 
 <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>
        // 獲取三個(gè)div,用于后續(xù)對(duì)div進(jìn)行dom操作，主要針對(duì)事件。注意這三個(gè)div是有層級(jí)關(guān)系的。
        var div1 = document.querySelector(".div1");
        var div2 = document.querySelector(".div2");
        var div3 = document.querySelector(".div3");
        var div4 = document.querySelector(".div4");

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


        //當(dāng)調(diào)用這個(gè)函數(shù)時(shí)，打印對(duì)應(yīng)的字符串
        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.點(diǎn)擊誰(shuí)，誰(shuí)就是目標(biāo)。每一次都是先從捕獲階段->目標(biāo)->冒泡階段考慮。如果中間達(dá)不到目標(biāo)，那么后面就失敗，不去執(zhí)行。

例子1

1是冒泡，2，3，4是捕獲。
在3截?cái)?點(diǎn)擊4：
分析：
1).4是目標(biāo)，所以1->2->3->4。
2).3是阻斷，3是捕獲階段阻斷，所以阻斷的是3的捕獲截?cái)唷?br> 3).所以點(diǎn)擊4，只能從1->2->3，進(jìn)入不了4，然后后面的失敗。捕獲2和3.

例子2

2和4是捕獲，1和3是冒泡。阻斷3，點(diǎn)擊4:
1).4是目標(biāo)，所以從1，2，3，4進(jìn)入。
2).在3處截?cái)啵?是冒泡，所以阻止3冒泡。所以
1->2->3->4->3.
3).先輸出捕獲的，再輸出冒泡的。
輸出2,4,3.

如果想訪問(wèn)更多，請(qǐng)?jiān)L問(wèn)這篇大佬的博客

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

欄目分類
最近更新