阻止事件冒泡

事件冒泡：开始时由最具体的元素接受，然后逐级向上传播到DOM最顶层节点。

页面document中有两个盒子，大盒子father里面一个小盒子son，执行以下代码：

<script>
    var son = document.querySelector('.son');
    son.addEventListener('click',function(e){
        alert('son');
    },false);
    
    var father = document.querySelector('.father');
    father.addEventListener('click',function(){
        alert('father');
    },false);
    
    document.addEventListener('click',function(){
        alert('document');
    })
</script>

由于son的监听事件addEventListener的useCapture为false，为冒泡阶段，所以当点击小盒子son后，会依次弹出 son father document 冒泡事件本身的属性，会带来坏处也会带来好处，需要我们灵活掌握。

阻止事件冒泡：

1、标准写法：利用事件对象里的stopPropagation()方法

var son = document.querySelector('.son');
    son.addEventListener('click',function(e){
        alert('son');
        e.stopPropagation();//停止传播，不过有兼容性问题，IE678以上支持
        //非标准，IE678支持的是：
        //e.cancelBubble = true; 取消泡泡
    },false);