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

第一种：return false：

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

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

第二种： event.stopPropagation()：

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

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

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

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

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

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

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

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

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

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

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