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

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

时间: 2024-08-08 16:11:03

jQuery中preventDefault()、stopPropagation()、return false 之间的区别的相关文章

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

"return false"之所以被误用的如此厉害,是因为它看起来像是完成了我们交给它的工作,浏览器不会再将我们重定向到href中的链接,表单也不会被继续提交,但这么做到底有什么不对呢? 可能在你刚开始学习关于jQuery事件处理时,看到的第一个例子就是关于如何阻止浏览器执行默认行为,比如下面这段演示click事件的代码 $("a.toggle").click(function () { $("#mydiv").toggle(); return

stopPropagation, preventDefault 和 return false 的区别

因为有父, 子节点同在, 因为有监听事件和浏览器默认动作之分. 使用 JavaScript 时为了达到预期效果经常需要阻止事件和动作执行. 一般我们会用到三种方法, 分别是 stopPropagation(), preventDefault() 和 return false. 它们之间有什么区别, 该何时使用呢? 将在本文中进行讲解. 术语 监听事件, 在在节点上能被监听的页面操作. 如: select 节点的 change 事件, a 节点的 click 事件.浏览器默认动作, 指特定页面元素

stopPropagation(), preventDefault() 和 return false

因为有父, 子节点同在, 因为有监听事件和浏览器默认动作之分. 使用 JavaScript 时为了达到预期效果经常需要阻止事件和动作执行. 一般我们会用到三种方法, 分别是 stopPropagation(), preventDefault() 和 return false. 它们之间有什么区别, 该何时使用呢? 将在本文中进行讲解. 术语 监听事件, 在在节点上能被监听的页面操作. 如: select 节点的 change 事件, a 节点的 click 事件.浏览器默认动作, 指特定页面元素

jQuery中的bind() live() delegate()之间区别分析

jQuery中的bind() live() delegate()之间区别分析 首先,你得要了解我们的事件冒泡(事件传播)的概念,我先看一张图 1.bind方式 $('a').bind('click',function (){ alert('click'); }) 解析:这种方式最简单,jq扫描文档找出所有的a,让将函数绑定到每个元素的click事件上 2.live方式 $('a').live('click',function (){ alert('click'); }) 解析:jq将函数绑定到$

JS_stopPropagation, preventDefault 和 return false

因为有父, 子节点同在, 因为有监听事件和浏览器默认动作之分. 使用 JavaScript 时为了达到预期效果经常需要阻止事件和动作执行. 一般我们会用到三种方法, 分别是 stopPropagation(), preventDefault() 和 return false. 它们之间有什么区别, 该何时使用呢? 将在本文中进行讲解. 术语 监听事件, 在在节点上能被监听的页面操作. 如: select 节点的 change 事件, a 节点的 click 事件.浏览器默认动作, 指特定页面元素

jQuery中hover与mouseover和mouseout的区别分析

本文实例分析了jQuery中hover与mouseover和mouseout的区别.分享给大家供大家参考,具体如下: 以前一直以为在jquery中其实mouseover和mouseout两个事件等于hover事件.两个没什么区别,应该是一样的.但昨天一个动画效果才让我见识了,这两个并不能等同. <div class="wrapper"> <div class="img"></div> <div class="tex

jQuery中两种阻止事件冒泡的区别

方式一:event.stopPropagation(); 方式二:return false; 但是这两种方式是有区别的.return false 不仅阻止了事件往上冒泡,而且阻止了事件本身.event.stopPropagation() 则只阻止事件往上冒泡,不阻止事件本身. 例子: 当文本输入框获取焦点后,在div1的mousedown事件中采用 event.stopPropagation(); 代码,我们鼠标单击红色区域后文本输入框光标失去.而当我们使用 return false; 代码时,

jquery中map函数与each函数的区别

?jquery中的each函数和map函数的用法看起来差不多,但其实还是有一点区别的. ?其中一个重要的区别是,each返回的是原来的数组,并不会新创建一个数组.而map方法会返回一个新的数组.如果在没有必要的情况下使用map,则有可能造成内存浪费. ?例如: var items = [1,2,3,4]; ? $.each(items, function() { alert('this is ' + this); }); var newItems = $.map(items, function(

jquery中prop()方法和attr()方法的区别

jquery1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. 大家都知道有的浏览器只要写disabled,checked就可以了,而有的要写成disabled = "disabled",checked="checked",比如用attr("checked")获取checkbox的checked属性时选中的时候可以取到值,值为"checked"但没选中获取值就是un