阻止事件冒泡，阻止默认事件

首先事件共分为三个阶段：

1. 捕获阶段：事件从文档根元素开始逐层向下传递，直到找到事件目标，
2. 目标阶段：找到事件目标并触发相应的事件，
3. 冒泡阶段：从目标逐层向上返回到根节点。

事件冒泡：顾名思义就是事件一级一级向上触发，直到window/document结束。

较常见的事件冒泡就是一个父级元素和它的子级元素同时具有点击事件，当触发子级元素的点击事件时，父级元素的点击事件也会被触发，触发顺序是由子级到父级传递的，由内到外自发的，这就是事件冒泡。

1. event.stopPropagation()方法

这是阻止事件冒泡的方法，不让事件向上蔓延，但是默认事件仍会执行，当调用这个方法的时候，如果点击一个连接，这个链接仍然会被打开。

2. event.preventDefault()方法

这是阻止默认事件的方法，调用此方法，链接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素。

3. return false  ；

该方法会同时阻止事件冒泡和默认事件；写上此代码，链接不会被打开，事件也不会传递到上一层的父元素；可以理解为return false就等于同时调用了event.stopPropagation()和event.preventDefault()。

接下来看几组demo，使用jquery进行DOM操作：

html：

<div class="box1">
    <a href="http://www.baidu.com" target="_blank"></a>
</div>

css：

.box1{
	height: 200px;
	width: 600px;
	margin: 0 auto;
    background: #EEEEEE;
}
.box1 a{
	display: block;
	height: 100px;
	width: 100px;
	background: blueviolet;
	margin: 0 auto;
}

第一种：

//不阻止事件冒泡和默认事件
$(".box1").click(function(){
	console.log(1);
});

第二种：

//阻止冒泡
$(".box1 a").click(function(event){
	event.stopPropagation();//不会打印1，但是页面会跳转；			
});
						
$(".box1").click(function(){
	console.log("1")				
});

第三种：

$(".box1 a").click(function(event){			
	//阻止默认事件
    event.preventDefault();//页面不会跳转，但是会打印出1，
});
$(".box1").click(function(){
    console.log("1");			
});

第四种：

$(".box1").click(function(){
    console.log("1")
});	

$(".box1 a").click(function(event){
	//阻止冒泡
    event.stopPropagation();			
    //阻止默认事件
    event.preventDefault() //页面不会跳转，也不会打印出1
})

第五种：

$(".box1").click(function(){
	console.log("1");			
});									
$(".box1 a").click(function(event){
	return false;  //页面不会跳转，也不会打印出1，相当于同时调用了event.stopPropagation()和event.preventDefault()事件
})

​

以上代码可以知道该冒泡事件为：当a标签和.box1都有点击事件时，点击a标签即会跳转页面，也会打印出1。

注：以上demo实例转载至 https://blog.csdn.net/wxl1555/article/details/53128966，借用学习一下，敬请见谅，谢谢啦！！！