<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>事件冒泡處理</title>
</head>
<style>
body{
background-color:red;
}
div{
width:300px;
height:300px;
background:aqua;
}
</style>
<body onclick="bottomPevel();">
<div onclick="topPevel();"></div>
</body>
<script>
//事件冒泡:一次觸發了兩次不同的事件
//點擊事件:onclick
//取消事件冒泡:ev.cancelBubble=ture
function bottomPevel(e){
alert('底層事件')
}
function topPevel(e){
//取消事件冒泡,阻止事件往下傳
var ev = e || event//兼容性設置
ev.cancelBubble=true
alert('上層事件')
}
</script>
</html>