• 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控制页面内容
    class configured for Signature (provider: BC) cannot be found
    springmvc+logback项目的日志搭建
    logback.xml配置
    spring源码分析(一)
    xml格式字符串转为Map
    .前端开发的优化问题?
    对Node的优点和缺点提出了自己的看法?
    编写一个数组去重的方法?
    添加删除替换插入到某个接点的方法?
  • 原文地址:https://www.cnblogs.com/jewave/p/12202653.html
Copyright © 2020-2023  润新知