方法一:注:event.stopPropagation(); 记得参数加上event
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1 {
border: green 40px solid;
width: 300px;
height: 300px;
margin: auto;
}
.box2 {
border: yellow 40px solid;
width: 220px;
height: 220px;
margin: auto;
}
span {
position: relative;
left: 50px;
top: 50px;
background-color:red;
}
</style>
<script src="jquery-1.10.1.min.js"></script>
<script>
$(function(){
$('#span').on('click',function(event){
alert('span');
event.stopPropagation();
})
$('#box2').on('click',function(event){
alert('box2');
event.stopPropagation();
})
$('#box1').on('click',function(event){
alert('box1');
event.stopPropagation();
})
})
</script>
</head>
<body>
<div id="box1" class="box1">
<div id="box2" class="box2">
<span id="span">This is a span.</span>
</div>
</div>
</body>
</html>
方法二:利用return false;
但是这两种也是有区别的
return false 不仅阻止了事件往上冒泡,而且阻止了事件本身。event.stopPropagation() 则只阻止事件往上冒泡,不阻止事件本身。