相关概述

事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点。
事件冒泡本身的特性，会带来的坏处，也会带来的好处。

如何阻止事件冒泡

方法：e.stopPropagtion()（标准方法）、e.cancelBubble()（IE6-8，非标准）.

一、e.stopPropagetion（）（标准，牢记）

翻译 stop：停止、Propagetion：传播
注：e为function里的形参。
代码案例：

    <div class="box">大盒子
        <div class="lbox">小盒子
            <button>测试冒泡事件</button>
        </div>
    </div>
    <script>
        let box = document.querySelector(".box")
        let lbox = document.querySelector(".lbox")
        let btn = document.querySelector("button")
        box.addEventListener('click', function (e) {
            alert('我是大盒子')
        }, false)
        lbox.addEventListener('click', function(e) {
            alert('我是小盒子')
        }, false)
        btn.addEventListener('click', function(e) => {
            alert('我是按钮')
            e.stopPropagetion();//e是形参
        }, false)
    </script>

二、e.cancelBubble()(非标准,IE6-8使用)

翻译 cancel:取消,Bubble：泡泡 用法：

     <div class="box">大盒子
        <div class="lbox">小盒子
            <button>测试冒泡事件</button>
        </div>
    </div>
    <script>
        let box = document.querySelector(".box")
        let lbox = document.querySelector(".lbox")
        let btn = document.querySelector("button")
        box.addEventListener('click', function (e) {
            alert('我是大盒子')
        }, false)
        lbox.addEventListener('click', function(e) {
            alert('我是小盒子')
        }, false)
        btn.addEventListener('click', function(e) => {
            alert('我是按钮')
            e.cancelBubble=true;//e是形参
        }, false)
    </script>

注意

阻止冒泡添加在哪里，就只能取消所在位置的事件冒泡，如代码实例中点击小盒子lbox会继续向上冒泡，如果想要阻止lbox冒泡，需要在小盒子lbox添加相关代码。