今天在自学敲代码的时候发现了一个问题，当时的例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#div1{
height: 200px;
200px;
background-color: #3b7796;
}
#btn{
margin: 50px;
}
</style>
<script>
function fn1(){
alert("this is div");
}
function fn2(){
alert("this is btn");
}
</script>
<body>
<div id="div1" onclick="fn1();">
<button id="btn" onclick="fn2();">btn</button>
</div>
</body>
</html>
在我点击 btn 之后，会触发div上的点击事件，就会看到2个提醒框。
这个原因就是因为事件冒泡造成的，修改代码
function fn2(e){
//这里做浏览器兼容，如果提供了event 就说明他不是IE
if(e && e.stopPropagation){
e.stopPropagation();
}else {
//IE方式处理事件冒泡
window.event.cancelBubble = true;
}
alert("this is btn");
}
这样就阻止了事件冒泡。