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

最新推荐文章于 2023-02-03 11:39:24 发布

weixin_33729196

最新推荐文章于 2023-02-03 11:39:24 发布

阅读量90

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://yq.aliyun.com/articles/443319

本文介绍了JavaScript中处理事件的三种方法：return false用于直接终止函数执行；event.stopPropagation()用于阻止事件冒泡，确保仅触发目标元素的事件；event.preventDefault()则用于阻止默认行为，如阻止超链接的跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　第一种：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标签就不会跳转了。