zoukankan      html  css  js  c++  java
  • 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标签就不会跳转了。

     
  • 相关阅读:
    CSS Modules
    回调地狱
    css实现双色饼图
    vue项目中使用less
    pug(jade) 学习笔记
    React组件proptypes, ref
    react+express实现跨域
    react高阶组件
    Oracle数据库出现锁表情况分析
    JPA常用注解记录
  • 原文地址:https://www.cnblogs.com/xuange306/p/5642591.html
Copyright © 2011-2022 走看看