JavaScrip阻止冒泡和阻止元素默认行为详解

1：js停止冒泡事件：

function myfn(e){
window.event? window.event.cancelBubble = true : e.stopPropagation();
}

2：js阻止元素默认行为

function myfn(e){
window.event? window.event.returnValue = false : e.preventDefault();
}

3：js的阻止事件冒泡和阻止元素默认行为详解

w3cschool的方法是event.stopPropagation()，而IE则是使用window.event.cancelBubble = true·

w3c的stopPropagation()也是事件对象(Event)的一个方法，作用是阻止目标元素的冒泡事件，但是会不阻止默认行为。什么是冒泡事件？比如在一个按钮是绑定一个”click”事件，那么”click”事件会依次在它的父级元素中被触发 。stopPropagation就是阻止目标元素的事件冒泡到父级元素。如：

div id='div1' onclick='alert("最外层");'>
<ul onclick='alert("中间层");'>
<li onclick='alert("最里层");'>test111</li>
</ul>
</div>

说明：上面的代码，Demo如下,我们单击test时，会依次触发alert(“最里层”),alert(“中间层”),alert(“嘴歪层”)，这就是事件冒泡。

4：下面这个是使用jQuery，既阻止默认行为又停止冒泡

<div id='div'  onclick='alert("div111");'>
<ul  onclick='alert("ul111");'>
<li id='ul-a' onclick='alert("li111");'><a href="http://taobao.com/"id="testC">taibao.com</a></li>
</ul>
</div>
$("#testC").on('click',function(){
return false;
});

总结使用方法

(1):当需要停止冒泡行为时，可以使用:

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

(2):当需要阻止默认行为时，可以使用·:

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