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標簽就不會跳轉了。