首先看下JS的事件模型，JS事件模型为向上冒泡，如onclick事件在某一DOM元素被触发后，事件将跟随节点向上传播，直到有click事件绑定在某一父节点上，如果没有将直至文档的根。
阻止冒泡：
1、stopPropagation()【对于非IE浏览器】
2、cancelBubble属性为true【对于IE浏览器】
另：Jquery已经有兼容浏览器的方法，event.stopImmediatePropagation()；即
如果有多个相同类型事件的事件监听函数绑定到同一个元素，当该类型的事件触发时，它们会按照被添加的顺序执行。如果其中某个监听函数执行了 event.stopImmediatePropagation() 方法，则当前元素剩下的监听函数将不会被执行。（译者注：注意区别 event.stopPropagation ）
案例参考如下
<html>
<script src="https://www.jq22.com/jquery/jquery-1.9.1.js"></script>
<body>
<style type="text/css">
<!--
.outclick{ padding:30px 0; background:#c00; width:150px;}
.click{ margin:auto; width:50px; height:50px; background:#000;}
-->
</style>
<div class="outclick">
<div class="click"></div>
</div>
<script type="text/javascript">
$(function(){
$(".click").on("click",function(e){
console.log("click1")
//事件
e = e || event; stopFunc(e);
});
$(".outclick").on("click",function(e){
console.log("click2")
//事件
e = e || event; stopFunc(e);
});
$(document).on("click",function(){
console.log("click3")
//事件
});
//公共调用，冒泡事件阻止
var stopFunc = function(e) {
e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
}
});
</script>
</body>
</html>