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

摘要：通过代码来区分阻止事件冒泡和阻止默认事件的方法。

1. event.stopPropagation() 方法

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

2. event.preventDefault() 方法

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

3. return false;

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

4. 代码示例

html 代码：

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

css 代码：

1
2
3
4
5
6
7
8
9
10
11
12
.box1{
	height: 200px;
	width: 600px;
	margin: 0 auto;
}
 
.box1 a{
    display: block;
	height: 50%;
	width: 50%;
	background: red;
}

js代码：

  • 第一种 

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

  • 第二种

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

  • 第三种

    1
    2
    3
    4
    5
    6
    7
    8
    $('.box1').click(function(){
        console.log('1');
    });
    $('.box1 a').click(function(event){			
        // 阻止默认事件
        event.preventDefault();
        // 页面不会跳转，但是会打印出1，
    });

  • 第四种

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    $('.box1').click(function(){
    console.log('1');
    });	
    // 阻止冒泡
    $('.box1 a').click(function(event){
        event.stopPropagation();
        // 阻止默认事件
        event.preventDefault();
        // 页面不会跳转，也不会打印出1
    })

  • 第五种

    1
    2
    3
    4
    5
    6
    7
    8
    9
    $('.box1').click(function(){
    	console.log('1')				
    });	
     
    								
    $('.box1 a').click(function(event){
    	return false;  
        // 页面不会跳转，也不会打印出 1，等于同时调用了 event.stopPropagation() 和 event.preventDefault()
    });
 上一页

Git