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

1. event.stopPropagation() 方法

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

2. event.preventDefault() 方法

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

3. return false;

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

4. 代码示例

html 代码：

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

css 代码：

.box1{
	height: 200px;
	width: 600px;
	margin: 0 auto;
}
 
.box1 a{
    display: block;
	height: 50%;
	width: 50%;
	background: red;
}

js代码：

• 第一种

// 不阻止事件冒泡和默认事件		
$('.box1').click(function(){
    console.log('1');
	// 不阻止事件冒泡会打印 1，页面跳转		
});

• 第二种

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

• 第三种

$('.box1').click(function(){
    console.log('1');
});
$('.box1 a').click(function(event){			
    // 阻止默认事件
    event.preventDefault();
    // 页面不会跳转，但是会打印出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()
});