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

     
  • 相关阅读:
    【Leetcode】120.Triangle
    【编程珠玑】第一章位图排序
    【Python】Xml To Excel
    【Django】git建仓上传时遇到的小问题
    【C++】 网络编程 01
    2018.09.20python学习第八天
    2018.09.19python作业
    2018.09.19python学习第七天part2
    2018.09.19python学习第七天part1
    2018.09.18python学习第六天part3
  • 原文地址:https://www.cnblogs.com/xuange306/p/5642591.html
Copyright © 2011-2022 走看看