前言：有时候，当我们给一个外层 div 添加了一个‘click’事件，然而在内层的其他元素我们也为它添加了 ‘click’事件，那么当我们点击内层的元素时，外层的事件会响应吗？接下来我们就来一步一步解开这个问题吧！

    一、准备： 这里是一个三层模型

    <!--cs--><div class="outer"><div class="inner"><button class="btn">点击我</button></div></div>

     样式图：

    二、分别绑定事件：

       $(function(){$('.outer').on('click', function(){console.log('我是最外面的DIV, 时间: ' + new Date().getMilliseconds());});$('.inner').on('click', function(){console.log('我是最里面的DIV, 时间: ' + new Date().getMilliseconds());});$('.btn').on('click', function(){console.log('我是按钮哦！, 时间: ' + new Date().getMilliseconds());});});

   三、 点击中间的按钮后：

    四、现象：可以看见基本上是同一时间执行了，‘btn’上面的所有绑定了 ‘click’元素的click事件。这就是事件的冒泡带来的影响！要避免这样的现象发生，首先我们要清楚自己的目的是什么！这样就能很好的解决这个问题了，好了，废话不多说，return main；

    五、阻止：

        jQuery方式一，通过 返回 false 实现

            $('.btn').on('click', function(){console.log('我是按钮哦！, 时间: ' + new Date().getMilliseconds());return false; //阻止事件冒泡传播});

        方式二， 使用函数 event.stopPropagation();

            $('.btn').on('click', function(){console.log('我是按钮哦！, 时间: ' + new Date().getMilliseconds());event.stopPropagation();});

    六、结果验证：

    七、总结：

            1.一个事件起泡对应触发的是上层的同一事件 
　　          特殊：如果 outer 设置成双击事件，那么在你单击 btn 的时候就会起泡触发btn 和 inner 单击的事件 （这里注意双击包含单击）。 
            2.如果在click事件中，在你要处理的事件之前加上e.preventDefault(); 那么就取消了默认行为（通俗理解：相当于做了个return操作），不执行之后的语句了。（和阻止冒泡不是一回事）；                                                     3.e.stopPropagation()只要在click事件中，就不会触发上层click事件。

    预告: 下一篇应该是BFC（块级格式化上下文）