zoukankan      html  css  js  c++  java
  • jQuery中preventDefault()、stopPropagation()、return false 之间的区别

    一、preventDefault()方法,阻止浏览器默认行为

    浏览器有很多默认行为,比如form表单的submit按钮一点击,默认行为就要开始提交表单。

    再比如

    <a href="http://www.klmai.cn">内部优惠券</a>

    a链接一点击默认触发的行为就是浏览器地址栏变化后跳转到指定的网站。要阻止这种默认行为我们可以用preventDefault()方法。实例如下:

    <div class="div1">
        阻止浏览器默认行为<mark><a href="http://www.klmai.cn">内部优惠券</a></mark>阻止事件冒泡的区别
    </div>
    
    
    <script>
    
        $(".div1 a").click(function (ev) {
    
          alert(2);
          ev.preventDefault();   //阻止浏览器默认行为导致a链接不跳转
         
        });
    </script>

    二、stopPropagation()方法,阻止事件冒泡

    <div class="div1">
        阻止浏览器默认行为<mark><a href="http://www.klmai.cn">内部优惠券</a></mark>阻止事件冒泡的区别
    </div>
    
    
    <script>
        $(".div1").click(function () {
    
            alert(1)
        });
    
        $(".div1 a").click(function (ev) {
    
          alert(2);
          ev.preventDefault();   //阻止浏览器默认行为
          //我们以为只会alert(2);没想到DOM的事件冒泡机制导致父级div1的点击事件也触发所以alert(1)也执行。
    //如果不想触发DOM事件冒泡机制,就加入这句代码 【ev.stopPropagation(); 】
    }); </script>

    三、return false 常被用来终止代码继续执行,在jQuery中当你每次调用”return false“的时候,它实际上做了3件事情:

      •event.preventDefault();

      •event.stopPropagation();

      •停止回调函数执行并立即返回。

    综上我们知道return false作用最大不过也要斟酌选用,根据具体开发要求选用方法即可。

  • 相关阅读:
    程序员第一定律:关于技能与收入
    JS注册/移除事件处理程序
    关于程序猿,你不知道的15件事
    .NET后台输出js脚本的方法
    新项目经理必读:分析什么是项目经理
    项目如何开始:怎样和客户一起搞定需求
    【转】为什么程序员讨厌修改静态检查问题
    js的with语句使用方法
    软件版本号 详解
    PHP记忆碎片2投票汇总
  • 原文地址:https://www.cnblogs.com/jewave/p/12202653.html
Copyright © 2011-2022 走看看