阻止事件冒泡

冒泡机制：JavaScript冒泡机制是指如果某元素定义了事件A，如click事件，如果触发了事件之后，没有阻止事件冒泡，那么该事件将向父级元素传播，触发父类的click事件

<div class="father">
    <div class="son"></div>
</div>

 *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 400px;
            height: 400px;
            background-color: yellow;
            position: relative;
            margin: 100px auto;
        }
        .son{
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            top: 50%;
            left: 50%;
            transform:translate(-50%,-50%);
        }

如果不阻止事件冒泡点击子元素就会打印

son
father

let oFather = document.querySelector('.father');
    let oSon = document.querySelector('.son');

    oFather.onclick = function () {
        console.log('father');
    };
    oSon.onclick = function (event) {
        event = event || window.event;
        // event.stopPropagation();
        // event.cancelBubble = true;
        //兼容性写法
        if (event.cancelBubble){
            event.cancelBubble = true;//低版本浏览器IE8以下
        } else{
            event.stopPropagation();//高级浏览器
        }

        console.log('son');
    }

或者使用三目运算符来简化代码

let oFather = document.querySelector('.father');
    let oSon = document.querySelector('.son');

    oFather.onclick = function () {
        console.log('father');
    };
    oSon.onclick = function (event) {
        event = event || window.event;
        event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);
        console.log('son');
    }

阻止了子元素的事件冒泡后，点击子元素会打印

son