イベントバブリングを防ぐJSの方法＊基本原理と応用

非標準の記述: IE6-8 はイベントオブジェクトの cancelBubble プロパティを使用します。

標準的な記述方法: イベントオブジェクトの stopPropagation() メソッドを使用します。

イベントバブリングHTMLレイアウトCSSスタイルコード

まず、ケース分析用に 3 つのネストされた正方形を作成します。

    <div id="box1">box1
        <div id="box2">box2
            <div id="box3">box3</div>
        </div>
    </div>
    <div id="box4">box4
        <div id="box5">box5
            <div id="box6">box6</div>
        </div>
    </div>

  <style>
        #box1,
        #box4 {
            width: 300px;
            height: 300px;
            background-color: red;
            margin-bottom: 3px;
        }

        #box2,
        #box5 {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
        }

        #box3,
        #box6 {
            width: 100px;
            height: 100px;
            background-color: blanchedalmond;
        }
    </style>

スタイルは次のように表示されます

非標準の記述: IE6-8 はイベントオブジェクトcancelBubbleプロパティを使用します

イベントは追加されたレイヤーで停止し、バブルアウトしません。

    <script>
        window.onload = function () {
            var box1 = document.getElementById("box1");
            var box2 = document.getElementById("box2");
            var box3 = document.getElementById("box3");

            box1.onclick = function (e) {
                console.log('box1被点击');
                // e.cancelBubble = true;
            };
            box2.onclick = function (e) {
                console.log('box2被点击');
                e.cancelBubble = true;
            };
            box3.onclick = function (e) {
                console.log('box3被点击');
                e.cancelBubble = true;
            };
        };
    </script>

バブリングをキャンセルするには box3 のみを設定し、box3 をクリックすると、box3 のイベントのみが表示され、親はブロックされます

box2 と box3 をバブリングをキャンセルするように設定すると、どの要素をクリックすると独自のイベントが表示されるかを認識できます

標準的な書き方：イベントオブジェクトのstopPropagation()メソッドを使用する


            var box4 = document.getElementById("box4");
            var box5 = document.getElementById("box5");
            var box6 = document.getElementById("box6");

            box4.onclick = function (e) {
                console.log('box4被点击');
                // e.stopPropagation();
            };
            box5.onclick = function (e) {
                console.log('box5被点击');
                e.stopPropagation();
            };
            box6.onclick = function (e) {
                console.log('box6被点击');
                e.stopPropagation();
            };

ドロップダウンメニュー

html部分

 <input type="text">
    <ul>
        <li>red</li>
        <li>blue</li>
        <li>yellow</li>
        <li>black</li>
        <li>white</li>
    </ul>

以下はコード部分です

    <script>
        window.onload = function () {
            var input = document.querySelector("input");
            var ul = document.querySelector("ul");
            var lis = document.querySelectorAll("li");

            input.onclick = function () {
                ul.style.display = 'block';
            };

            for (var i = 0; i < lis.length; i++) {
                lis[i].onclick = function () {
                    input.value = this.innerHTML;

                    ul.style.display = 'none';
                };
            }
            // 注意这里涉及冒泡i
            document.onclick = function () {
                ul.style.display = 'none';
            };
        };
    </script>

実行時の問題は、色の入力ボックスをクリックして色を表示するとメニューが消え、再度入力をクリックしてもメニューが表示されないことです。

理由は、入力がドキュメントに属しており、入力がクリックされるとイベントがバブルアップするため、入力をクリックするとメニューの表示がトリガーされますが、ドキュメントにバブルするとメニュー表示がキャンセルされます。、そのためメニューは表示されません。この問題は、イベントのバブリングを防ぐことで解決できます。

操作方法

入力クリックイベントでのイベントバブリングを防止する


            input.onclick = function (e) {
                ul.style.display = 'block';

                // 阻止事件冒泡
                e.cancelBubble=true;
            };

イベントを停止させたい場合は、イベントのバブリングを防止するメソッドを追加します。ドキュメントへのバブリングを防止するには、イベントのバブリングを防止するメソッドを入力に追加します。