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标签就不会跳转了。 博客中所涉及到的图片都有版权，请谨慎使用