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()
    });

 评论