jQuery 冒泡事件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>冒泡事件</title>
<script src="scripts/jquery-1.7.1.min.js"></script>

</head>
<body>
<script type="text/javascript"> 
$(document).ready(function(){ 
$('.one').click(function(e){ 
alert('one'); 
});             
$('.two').click(function(e){   
alert('two'); 
e.stopPropagation(); 
}); 
$('.three').click(function(e){ 
alert('three'); 
//阻止起泡取消下面的注释 
e.stopPropagation(); 
}); 
}); 
</script> 
<div class="one" style="width:200px;height:200px;background:green;"> 
one 
<a class="two" style="width:150px;height:150px;background:yellow;"> 
two 
<div class="three"> 
three 
</div> 
</a> 
</div> 
</body>
</html>

  

 

posted @ 2017-10-26 14:41  拈花醉  阅读(229)  评论(0编辑  收藏  举报