冒泡事件和默认事件

发表于 | 分类于 | |

浅淡事件冒泡和默认事件

如何使用jQuery阻止事件冒泡和默认事件

什么是事件冒泡？

事件从事件目标开始，往上冒泡直到页面上的最上一级标签。（这与事件捕获顺序相反）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="content">
	外层div元素
	<span>内层span元素</span>
	外层div元素
</div>
<div id="msg"></div>
<script>
$(function(){
	$("#content").bind("click",function(e){
		var txt=$("#msg").html()+"<p>外层div元素被点击</p>";
		$("#msg").html(txt);
	});
	$("span").bind("click",function(e){
		var txt=$("#msg").html()+"<p>内层span元素被点击</p>";
		$("#msg").html(txt);
	});
})
</script>

当点击span元素时会触发click事件,显示内层span元素被点击，同时因为事件冒泡，会触发content元素绑定的事件。

为什么要阻止事件冒泡呢？

当某个DOM节点绑定了某事件监听器时，本来是想该DOM节点触发事件，才来执行某种操作。结果是该节点的某后代节点触发某事件，由于事件冒泡，该DOM节点事件也会触发，执行了该绑定事件的操作，这样就违背了最初的本意。

###如何阻止事件冒泡？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
	.box1{
		height:200px;
		width:600px;
		margin:0 auto;
		border:1px solid #000;
	}
	.box1 a{
		display:block;
		height:50%;
		width:50%;
		background:red;
	}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
<body>
	<div class="box1">
		<a href="http://www.baidu.com" target="_blank"></a>
	</div>
</body>
<script>
	$(function(){
		$(".box1").click(function(){
			console.log("1");//不阻止事件冒泡会打印1 ，页面跳转
		})
	})
</script>

当点击a元素时，触发a本身的事件，同时也会触发父级绑定的click事件

1
2
3
4
5
6
7
8
9
10
<script>
	$(function(){
		$(".box1").click(function(){
			console.log("1");
		})
		$(".box1 a").click(function(e){
			e.stopPropagation();//不会打印a,但是页面会跳转
		})
	})
</script>

阻止了冒泡事件，点击a元素时，不会触发父级box1的绑定事件。但是会执行a的默认事件（跳转到百度页面）

1
2
3
4
5
6
7
8
9
10
 <script>
	$(function(){
		$(".box1").click(function(){
			console.log("1");
		})
		$(".box1 a").click(function(e){
			e.preventDefault();//页面不会跳转，但是会打印出1
		})
	})
</script>

阻止了a的默认事件，页面不会跳转，但是会触发父级的绑定事件

1
2
3
4
5
6
7
8
9
10
<script>
$(function(){
	$(".box1").click(function(){
		console.log("1");
	})
	$(".box1 a").click(function(e){
		return false;//不会打印1,页面不会跳转
	})
})
</script>

同时阻止了冒泡事件和默认事件，你也可以把return false替换成e.preventDefault()和e.stopPropagation();