话不多说直接放源码，没错，就是网上随便一搜就出来的这个！
js代码：

function cancelBubble(e) { 
    var evt = e ? e : window.event; 
        if (evt.stopPropagation) {        //W3C 
           evt.stopPropagation(); 
        }else {       //IE      
           evt.cancelBubble = true; 
        }  
}

为什么很多人试了都说没用呢？
事实上很多同学喜欢使用这种方式绑定事件

HTML:
<div onclick="test(this)"></div>
JS:
function test(oo){
    //事件处理
}

其实无论是哪种方法，传值都是很难避免的
这也就是这个方法的局限性
它在这里调用时，因为test函数已经传了值，那么我们的e就进不来
这也就造成了调用了没反应的问题
调用方法：
在绑定事件的位置，调用cancelBubble()即可，像这样：

HTML:
<div class="test" onclick="test()"></div>
JS:
function test(){
    cancelBubble()
    //事件处理
}
//或者这样
$(".test").click(function(){
    cancelBubble()
    //事件处理
})
//或者这样
$(".test")[0].addEventListener("click",function(){
    cancelBubble()
    //这样写似乎可以解决传值的e的问题，因为add原生方法是异步添加，可相应多个click事件
    // 但是如果页面是动态添加的元素，需要重复绑定事件的问题仍然头疼
})

若需要兼容火狐，在调用该函数时，如果是在一个函数内部调用该函数，那么外部的函数不可传值进来
也就是说，尽量单独调用
emmmm最近才发现一件事情
事实上jq的on函数可以重复绑定相同事件
也就是说

$(oo).on('click',function(){
    console.log(1)
})
$(oo).on('click',function(){
    console.log(2)
})

在控制台打印时，会输出1和2 ，而不是只输出2