阻止事件冒泡

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

• 阻止事件冒泡的方式

  • 标准写法：利用事件对象里面的 stopPropagation()方法 （ stop 停止 Propagation 传播）

   e.stopPropagation()  
  

  • 非标准写法：IE 6-8 利用事件对象 cancelBubble 属性 （Bubble：水泡，cancelBubble ：取消冒泡）

   e.cancelBubble = true;
  

• 例子：

    <div class="father">
        <div class="son">son儿子</div>
    </div>
    <script>
        var son = document.querySelector('.son');
		// 给son注册单击事件
        son.addEventListener('click', function(e) {
            alert('son');
            e.stopPropagation(); 
            window.event.cancelBubble = true; 
        }, false);

        var father = document.querySelector('.father');
		// 给father注册单击事件
        father.addEventListener('click', function() {
            alert('father'); // 在son中取消冒泡之后，这里就不会执行
        }, false);
		// 给document注册单击事件
        document.addEventListener('click', function() {
            alert('document');// 在son中取消冒泡之后，这里就不会执行
        })
    </script>

• 阻止事件冒泡的兼容性处理

  if(e && e.stopPropagation){
      e.stopPropagation();
  }else{
      window.event.cancelBubble = true;
  }