JS阻止事件冒泡的方法

JS事件冒泡

在一个对象上触发某类事件（如单击onclick事件），如果此对象定义了此事件的处理程序，此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

<div id="one" onclick="alert('最外层');">
　  <div id="two" onclick="alert('中间层！')">
　　　 <a id="three" href="http://www.baidu.com"  onclick="alert('最里层！')">按钮</a>
　　</div>
</div>

运行页面，点击“按钮”,会依次弹出：最里层---->中间层---->最外层 ---->链接到百度
只点击ID为three的标签，执行了三个alert操作，这就是事件冒泡。事件冒泡过程是从最里层冒泡到最外层。

JS阻止默认事件和冒泡的写法

阻止事件冒泡的兼容性写法

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

阻止事件默认行为

  function stopDefault(e){
    if(e && e.preventDefault){
        e.preventDefault();
    }else{
        window.event.returnValue = false;
    }
}

JS阻止事件冒泡的三种方法

1. event.stopPropagation();  事件处理过程中，阻止了事件冒泡，但不会阻止默认行为
2. return false;  事件处理过程中，阻止了事件冒泡，也阻止了默认行为
3. event.preventDefault(); 事件处理过程中，不阻击事件冒泡，但阻击默认行为

阻止事件冒泡

1. event.stopPropagation();  事件处理过程中，阻止了事件冒泡，但不会阻止默认行为（它就执行了超链接的跳转）

function() {
     $("#three").click(function(event) {
         event.stopPropagation();
    });
 }

2. return false;  事件处理过程中，阻止了事件冒泡，也阻止了默认行为（它就没有执行超链接的跳转）

$(function() {
　$("#three").click(function(event) {
　　return false;
　});
});

3. event.preventDefault(); 事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转）

function() {
     $("#three").click(function(event) {
         event.preventDefault();
    });
 }

如果把event.preventDefault();放在头部A标签的click事件中，点击“点击我”，会发现它依次弹出：我是最里层---->我是中间层---->我是最外层，但最后却没有跳转