jQuery阻止默认行为和阻止冒泡
1.阻止默认行为:通常是值一个标签的默认行为,如button的提交表单,a标签的跳转等。
那如何阻止标签的默认行为?
1)return false
2) e.preventDefault();
- <!DOCTYPE html>
- <html>
- <head>
- <title>queue</title>
- <meta charset="utf-8">
- <script type="text/javascript" src="js/jquery.js"></script>
- </head>
- <body>
- <!-- 设置五幅图片 -->
- <div>
- <a class="a1" href="http://www.baidu.com">百度入口一(被阻止)</a>
- <a class="a2" href="http://www.baidu.com">百度入口二(可使用)</a>
- </div>
- <script type="text/javascript">
- $(function(){
- $('.a1').click(function(e){
- //return false;
- e.preventDefault();
- });
- })
- </script>
- </body>
- </html>
其中return false不仅阻止默认行为还会阻止冒泡。
2.阻止事件冒泡
事件冒泡是指如果子元素与父元素或者祖先元素包含同样的事件,如click等,当点击子元素时,父元素上的点击事件也会触发。
阻止时间冒泡的方法:
1)return false
2)e.stoppropagation();
- <!DOCTYPE html>
- <html>
- <head>
- <title>queue</title>
- <meta charset="utf-8">
- <script type="text/javascript" src="js/jquery.js"></script>
- </head>
- <body>
- <div class="div3">
- div3
- <div class="div2">
- div2
- <div class="div1">div1</div>
- </div>
- </div>
- <script type="text/javascript">
- $(function(){
- $('div').click(function(e){
- alert(e.target.className);
- e.stopPropagation();
- //return false;
- });
- })
- </script>
- </body>
- </html>
总结:return false会阻止事件冒泡和默认行为
e.stopPropagation()只阻止事件冒泡;
e.preventDefault()只阻止默认行为;
jQuery阻止默认行为和阻止冒泡的更多相关文章
- javascript的阻止默认事件和阻止冒泡事件
这两个方面的知识,在妙味课堂中有听过,再次复习一下: 原文来自:[http://www.cnblogs.com/Essence/p/4266618.html] 事件冒泡与默认行为 在说事件冒泡之前 ...
- DOM2级事件对象、添加事件、阻止默认事件、阻止冒泡事件、获取事件对象目标的兼容处理
事件对象——兼容处理 /* * 功能: 事件对象兼容 * 参数: 表示常规浏览器的事件对象e */ function getEvent(e) { // 如果存在e存在,直接返回,否则返回window. ...
- (O)阻止默认事件和阻止冒泡的应用场景
场景1:阻止默认事件 比如这样的一个需求 点击取消a标签按钮的时候会触发一些js动作,但是不能让这个a标签产生跳转行为, 所以需要在点击取消的时候 阻止冒泡,防止其跳转. <a id='ca ...
- vue 事件修饰符(阻止默认行为和事件冒泡)
1. 原生js中,阻止事件冒泡,获取点击对象, e.stopPropagation(); 2. vue阻止事件冒泡@click.stop="show" <body> & ...
- s事件之event.preventDefault()与event.stopPropagation()的阻止默认事件和阻止事件冒泡的用法
event.preventDefault()用法介绍 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作).例如,如果 type 属性是 "submit" ...
- JQUERY中的事件处理:RETURN FALSE、阻止默认行为、阻止冒泡以及兼容性问题
return false 在jQuery中,我们常用return false来阻止浏览器的默认行为,那"return false"到底做了什么? 当你每次调用"retur ...
- JS中阻止默认事件与事件冒泡
JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...
- js 停止事件冒泡 阻止浏览器的默认行为(阻止超连接 # )
在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...
- js事件冒泡、阻止事件冒泡以及阻止默认行为
事件冒泡 当事件发生后,这个事件就要开始传播(从里到外或者从外向里).为什么要传播呢?因为事件源本身(可能)并没有处理事件的能力,即处理事件的函数(方法)并未绑定在该事件源上.例如我们点击一个按钮时, ...
随机推荐
- linux -小记(3) 问题:linux 安装epel扩展源报错
EPEL提供的软件包大多基于其对应的Fedora软件包,不会与企业版Linux发行版本的软件发生冲突或替换其文件. epel安装对应的rpm包 centos5 32位epel源下载地址: www.li ...
- IIS:日志代码分析
如何看IIS日志代码,打开IIS日志后,你会看见里面有很多访问记录.baiduspider,Googlebot等就是蜘蛛了.蜘蛛爬过后都会留下记录的,状态代码列在下面: 100 - 表示已收到请求的一 ...
- (C#) Interview Questions.
(Note: Most are collected from Internet. 绝大部分内容来自互联网) 1. What's the difference between Hashtable and ...
- [Tex学习笔记]积分平均
$\def\avint{\mathop{\mathchoice{\,\rlap{-}\!\!\int} {\rlap{\raise.15em{\scriptstyle -}}\kern-.2em\in ...
- BlockingQueue深入分析
1.BlockingQueue定义的常用方法如下 抛出异常 特殊值 阻塞 超时 插入 add(e) offer(e) put(e) offer(e,time,unit) 移除 remove() p ...
- Linux Install VirtualBox
添加源: cd /etc/yum.repos.dwget http://download.virtualbox.org/virtualbox/rpm/rhel/virtualbox.repo 下面3个 ...
- mac配置impala odbc
下载mac对应驱动并安装:http://www.cloudera.com/downloads.html.html *HOST 地址是impala Daemon所在的机器ip,端口可以在cm中设置 vi ...
- 升级正版win10及保持yosemite双操
因为有同事升级了正版的win10,心头长草了,本来x230的win7就是正版,现在win10可以免费升级,为何不做? 为此跑了2趟lenovo的维修站,诸多限制,最终决定自己搞定.据说,需要恢复到原厂 ...
- LoadRunner 多场景批处理
@echo off echo *********************************echo ****多场景测试*************echo ******************** ...
- 2017/1/8 C语言程序练习d
有10个数按由小到大顺序存放在一个数组中,输入一个数,要求用折半查找法找出该数是数组中第几个元素的值.如果该数不在数组中,则打印出"无此数". 输入:-12 -8 12 24 45 ...