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

     
  • 相关阅读:
    codeforces 645C. Enduring Exodus
    test markdown
    codeforces 817C Really Big Numbers
    797C C. Minimal string
    ubuntu配置安卓开发环境记录
    常用网址
    Mysql/Oracle/达梦中数据字典表
    Hadoop0.20.2中MapReduce读取gb2312文件出现乱码问题
    凝思磐石4.2系统字符编码的修改
    hadoop学习(三)HDFS常用命令以及java操作HDFS
  • 原文地址:https://www.cnblogs.com/xuange306/p/5642591.html
Copyright © 2011-2022 走看看