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标签就不会跳转了。
博客中所涉及到的图片都有版权，请谨慎使用
文档来源：51CTO技术博客https://blog.51cto.com/u_10624715/3234231
页:
[1]