码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-01-16 18:59:36      阅读:90      评论:0      收藏:0      [点我收藏+]

标签:代码   nbsp   事件   href   func   fun   default   div   style   

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

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

标签:代码   nbsp   事件   href   func   fun   default   div   style   

原文地址:https://www.cnblogs.com/jewave/p/12202653.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!