今天在自学敲代码的时候发现了一个问题,当时的例子如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#div1{
height: 200px;
width: 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" οnclick="fn1();">
<button id="btn" οnclick="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");
}
这样就阻止了事件冒泡。