JQuery 阻止事件冒泡---3种实现方式

第一种：return false：

缺点：直接返回了函数，函数后面的语句没法执行了；

$('.btn').on('click',function(event){
    do something ...
    return false    
})

第二种： event.stopPropagation()：

1、阻止事件冒泡这里以click事件为例

<div class="btn1">
    <div class="btn2"></div>
</div>

<!--********************************-->

<script>
    $('.btn1').on('click',function(event){
        console.log('btn1被点击了')
    })
    $('.btn2').on('click',function(event){
        console.log('btn2被点击了')
    })
</script>

2、在这里，我们点击 btn2 时，也会触发他父级元素的 click 事件，就是也会输出 btn1被点击了 <br>，怎么办呢？这时我们就要用了到 <strong>event.stopPropagation()<br></strong>

$('.btn2').on('click',function(event){

        // ******************
        event.stopPropagation();

        // ******************
        console.log('btn2被点击了')
    })

3、这样就好了，但是，如果遇到这样的情况，下面这个 btn2 就不起作用了

<a href="http://www.google.com" class="btn1">
    <div class="btn2"></div>
</a>

第三种： event.preventDefault()  // 阻止默认事件的冒泡：

$('.btn2').on('click',function(event){

        // ******************
        event.preventDefault();

        // ******************
        console.log('btn2被点击了')
    })

这样，再点击 btn2 时，a标签就不会再跳转了......