jQuery中preventDefault()stopPropagation()return false 之间的区别

Posted 2021-03-15 jewave

一、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作用最大不过也要斟酌选用，根据具体开发要求选用方法即可。