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

     
  • 相关阅读:
    The Game
    棋盘问题(dfs)(类似8皇后)
    dfs---之全排列
    Dijkstra算法(求单源最短路径)
    四点共面 (简单题)
    最长递增子序列
    线段的重叠
    kruskal
    hdu 1232 畅通工程
    无限对拍程序
  • 原文地址:https://www.cnblogs.com/shuiche/p/5642591.html
Copyright © 2011-2022 走看看