<body>
<div id="out">
<div id="middle">
<div id="inner"></div>
</div>
</div>
</body>
<script>
$("#out").on('click',function(){
alert("点了外面的");
});
$("#middle").on('click',function(ev){
cancelBubble(ev);
alert("点了中间的");
});
$("#inner").on('click',function(ev){
cancelBubble(ev);
alert("点了里面的");
});
//阻止冒泡到下一个事件
function cancelBubble(ev){
var ev = getEvent();
if (window.event) {
ev.cancelBubble = true;
}else if(ev.preventDefault){
ev.stopPropagation();//阻止冒泡
}
}
//兼容火狐 获取event方法
function getEvent(){
if(window.event){return window.event;}
var func = getEvent.caller;
while(func != null){
var arg0 = func.arguments[0];
if(arg0){
if((arg0.constructor == Event || arg0.constructor == MouseEvent
|| arg0.constructor == KeyboardEvent)
|| (typeof(arg0) == "object" && arg0.preventDefault
&& arg0.stopPropagation)){
return arg0;
}
}
func = func.caller;
}
return null;
}
</script>
![JavaScript自学笔记【4】函数的声明与调用目录二、函数的声明 三、函数的调用[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)