<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>16.15jQuery事件冒泡的处理</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
var text = '';
$('#p1').click(function(){
text += "p1被单击了！<br>";
$('#inf').html(text);
//阻止冒泡发生
return false;
});
$('#div1').click(function(event){
text += "div1被单击了！<br>";
$('#inf').html(text);
//阻止冒泡发生
event.stopPropagation();
});
$('body').click(function(){
text += "body被单击了！<br>";
$('#inf').html(text);
});
});
</script>
<style>
#div1{
width:200px;
height:200px;
background-color:#FCC;
cursor:pointer;
}
#p1{
width:50px;
height:50px;
background-color:red;
cursor:pointer;
}
</style>
</head>
<body>
<div id="div1">
<p id="p1">p1</p>
</div>
<h2>冒泡处理</h2>
<span id="inf"></span>
</body>
</html>
