1.阻止默认行为:通常是值一个标签的默认行为,如button的提交表单,a标签的跳转等。

那如何阻止标签的默认行为?

  1)return false

  2) e.preventDefault();

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>queue</title>
  5. <meta charset="utf-8">
  6. <script type="text/javascript" src="js/jquery.js"></script>
  7. </head>
  8. <body>
  9. <!-- 设置五幅图片 -->
  10. <div>
  11.  
  12. <a class="a1" href="http://www.baidu.com">百度入口一(被阻止)</a>
  13. <a class="a2" href="http://www.baidu.com">百度入口二(可使用)</a>
  14.  
  15. </div>
  16. <script type="text/javascript">
  17. $(function(){
  18. $('.a1').click(function(e){
  19. //return false;
  20. e.preventDefault();
  21. });
  22. })
  23. </script>
  24. </body>
  25. </html>

其中return false不仅阻止默认行为还会阻止冒泡。

2.阻止事件冒泡

事件冒泡是指如果子元素与父元素或者祖先元素包含同样的事件,如click等,当点击子元素时,父元素上的点击事件也会触发。

阻止时间冒泡的方法:

  1)return false

  2)e.stoppropagation();

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>queue</title>
  5. <meta charset="utf-8">
  6. <script type="text/javascript" src="js/jquery.js"></script>
  7. </head>
  8. <body>
  9.  
  10. <div class="div3">
  11. div3
  12. <div class="div2">
  13. div2
  14. <div class="div1">div1</div>
  15. </div>
  16. </div>
  17.  
  18. <script type="text/javascript">
  19. $(function(){
  20. $('div').click(function(e){
  21. alert(e.target.className);
  22. e.stopPropagation();
  23. //return false;
  24.  
  25. });
  26. })
  27. </script>
  28. </body>
  29. </html>

总结:return false会阻止事件冒泡和默认行为

   e.stopPropagation()只阻止事件冒泡;

   e.preventDefault()只阻止默认行为;

jQuery阻止默认行为和阻止冒泡的更多相关文章

  1. javascript的阻止默认事件和阻止冒泡事件

    这两个方面的知识,在妙味课堂中有听过,再次复习一下: 原文来自:[http://www.cnblogs.com/Essence/p/4266618.html] 事件冒泡与默认行为   在说事件冒泡之前 ...

  2. DOM2级事件对象、添加事件、阻止默认事件、阻止冒泡事件、获取事件对象目标的兼容处理

    事件对象——兼容处理 /* * 功能: 事件对象兼容 * 参数: 表示常规浏览器的事件对象e */ function getEvent(e) { // 如果存在e存在,直接返回,否则返回window. ...

  3. (O)阻止默认事件和阻止冒泡的应用场景

    场景1:阻止默认事件   比如这样的一个需求 点击取消a标签按钮的时候会触发一些js动作,但是不能让这个a标签产生跳转行为, 所以需要在点击取消的时候 阻止冒泡,防止其跳转. <a id='ca ...

  4. vue 事件修饰符(阻止默认行为和事件冒泡)

    1. 原生js中,阻止事件冒泡,获取点击对象, e.stopPropagation(); 2. vue阻止事件冒泡@click.stop="show" <body> & ...

  5. s事件之event.preventDefault()与event.stopPropagation()的阻止默认事件和阻止事件冒泡的用法

    event.preventDefault()用法介绍 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作).例如,如果 type 属性是 "submit" ...

  6. JQUERY中的事件处理:RETURN FALSE、阻止默认行为、阻止冒泡以及兼容性问题

    return false 在jQuery中,我们常用return false来阻止浏览器的默认行为,那"return false"到底做了什么? 当你每次调用"retur ...

  7. JS中阻止默认事件与事件冒泡

    JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...

  8. js 停止事件冒泡 阻止浏览器的默认行为(阻止超连接 # )

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...

  9. js事件冒泡、阻止事件冒泡以及阻止默认行为

    事件冒泡 当事件发生后,这个事件就要开始传播(从里到外或者从外向里).为什么要传播呢?因为事件源本身(可能)并没有处理事件的能力,即处理事件的函数(方法)并未绑定在该事件源上.例如我们点击一个按钮时, ...

随机推荐

  1. linux -小记(3) 问题:linux 安装epel扩展源报错

    EPEL提供的软件包大多基于其对应的Fedora软件包,不会与企业版Linux发行版本的软件发生冲突或替换其文件. epel安装对应的rpm包 centos5 32位epel源下载地址: www.li ...

  2. IIS:日志代码分析

    如何看IIS日志代码,打开IIS日志后,你会看见里面有很多访问记录.baiduspider,Googlebot等就是蜘蛛了.蜘蛛爬过后都会留下记录的,状态代码列在下面: 100 - 表示已收到请求的一 ...

  3. (C#) Interview Questions.

    (Note: Most are collected from Internet. 绝大部分内容来自互联网) 1. What's the difference between Hashtable and ...

  4. [Tex学习笔记]积分平均

    $\def\avint{\mathop{\mathchoice{\,\rlap{-}\!\!\int} {\rlap{\raise.15em{\scriptstyle -}}\kern-.2em\in ...

  5. BlockingQueue深入分析

    1.BlockingQueue定义的常用方法如下   抛出异常 特殊值 阻塞 超时 插入 add(e) offer(e) put(e) offer(e,time,unit) 移除 remove() p ...

  6. Linux Install VirtualBox

    添加源: cd /etc/yum.repos.dwget http://download.virtualbox.org/virtualbox/rpm/rhel/virtualbox.repo 下面3个 ...

  7. mac配置impala odbc

    下载mac对应驱动并安装:http://www.cloudera.com/downloads.html.html *HOST 地址是impala Daemon所在的机器ip,端口可以在cm中设置 vi ...

  8. 升级正版win10及保持yosemite双操

    因为有同事升级了正版的win10,心头长草了,本来x230的win7就是正版,现在win10可以免费升级,为何不做? 为此跑了2趟lenovo的维修站,诸多限制,最终决定自己搞定.据说,需要恢复到原厂 ...

  9. LoadRunner 多场景批处理

    @echo off echo *********************************echo ****多场景测试*************echo ******************** ...

  10. 2017/1/8 C语言程序练习d

    有10个数按由小到大顺序存放在一个数组中,输入一个数,要求用折半查找法找出该数是数组中第几个元素的值.如果该数不在数组中,则打印出"无此数". 输入:-12 -8 12 24 45 ...