The method of JS to prevent event bubbling * basic principle and application

Table of contents

Event bubbling html layout css style code

Non-standard writing: IE6-8 uses the cancelBubble property of the event object

Standard writing method: use the stopPropagation() method in the event object

Drop-down menu

operation method

---

Event bubbling html layout css style code

First create three nested squares for case analysis

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

The styles are displayed as follows 

 

• Non-standard writing: IE6-8 uses event object cancelBubbleproperties

The event will stop at the added layer and will not bubble out

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

Only set box3 to cancel bubbling, click box3, only box3 events are displayed, and the parent is blocked

Set box2 and box3 to cancel bubbling, and you can realize which element you click to display its own event

• stopPropagation()Standard way of writing: use the method in the event object

            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();
            };
      

Drop-down menu

html part

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

Below is the code part

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

 The problem with running is that when you click the color input box to display the color, the menu disappears, and when you click the input again, the menu does not appear

The reason is that the input belongs to the document, and when the input is clicked, the event will bubble up, so the click on the input triggers the display of the menu, but when it bubbles to the document, the menu display is canceled, so the menu does not appear, and this problem can be solved by preventing the event from bubbling .

operation method

Prevent event bubbling in input click event

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

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

Where you want the event to stop, add a method to prevent event bubbling. To prevent bubbling to document, add a method to input to prevent event bubbling.