<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1 {
width: 500px;
height: 500px;
background: red;
}
#div2 {
width: 300px;
height: 300px;
background: green;
}
#div3 {
width: 100px;
height: 100px;
background: yellow;
}
</style>
<script src="js/jquery-3.1.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//事件冒泡:触发子标签中的某一个事件，引擎会把这个事件传递到父级标签，一直传到document，如果在这个传递链中某一级标签也有相同的事件，则会触发该事件，我们可以利用这个特征实现 “事件委托”
//取消事件冒泡，阻止事件从被触发的节点身上向上级传
event.stopPropagation()方法可以阻止事件冒泡
$(document).ready(function(){
$('#div1').click(function(){
alert('1')
}),
$('#div2').click(function(){
alert('2')
}),
$('#div3').click(function(){
alert('3');
event.stopPropagation();
console.log(event);
})
})
</script>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</body>
</html>
