阻止冒泡和取消默认事件

1. 冒泡型事件(从小到大)

test



//单击test时，会依次触发alert(“li”),alert(“ul”),alert(“div”)，这就是事件冒泡。

2. 抓捕型事件（从大到小）

阻止冒泡

w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true

window.event? window.event.cancelBubble = true : e.stopPropagation();

取消默认事件

w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false

    
        尽管点击，我也不会跳转
        
    

return false

javascript的return false只会阻止默认行为，而是用jQuery的话则既阻止默认行为又防止对象冒泡。·

原生js用return false

caibaojian.com


var a = document.getElementById("testB");
a.onclick = function(){
return false;
};

如上，只取消默认事件，但不取消冒泡事件。

jQuery使用return false

caibaojian.com


$("#testC").on('click',function(){
return false;
});

如上，即取消默认事件，又取消冒泡事件

总结使用方法
当需要停止冒泡行为时，可以使用

function stopBubble(e) { 
//如果提供了事件对象，则这是一个非IE浏览器 
if ( e && e.stopPropagation ) 
    //因此它支持W3C的stopPropagation()方法 
    e.stopPropagation(); 
else 
    //否则，我们需要使用IE的方式来取消事件冒泡 
    window.event.cancelBubble = true; 
}

当需要阻止默认行为时，可以使用

//阻止浏览器的默认行为 
function stopDefault( e ) { 
    //阻止默认浏览器动作(W3C) 
    if ( e && e.preventDefault ) 
        e.preventDefault(); 
    //IE中阻止函数器默认动作的方式 
    else 
        window.event.returnValue = false; 
    return false; 
}

来源：前端开发博客