jquery阻止事件冒泡的3种方式

　　第一种：return false，

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

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

　　第二种： event.stopPropagation();

　　阻止事件冒泡这里以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>

　　在这里，我们点击btn2是，也会触发他父级元素的click事件，就是也会输出

   》》btn1被点击了
但是我们怎么办呢？这是我们就要用了到event.stopPropagation()

 $('.btn2').on('click',function(event){
// ******************
        event.stopPropagation();
// ******************
        console.log('btn2被点击了')
    })

　　这样就好了。但是，如果遇到这样的建构，这个就不起作用了

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

　　想在点击btn2时超练级不跳转，就要使用第三种方式了

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

 $('.btn2').on('click',function(event){
// ******************
         event.preventDefault();
// ******************
        console.log('btn2被点击了')
    })

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