event.stopPropagation()与event.preventDefault()
<div id='div0'>
<div id='div1'>
<a href="#" id='div2'>2222</a>
</div>
</div>
- window.onload=function(){
- var div0=document.getElementById('div0');
- var div1=document.getElementById('div1');
- var div2=document.getElementById('div2');
- div0.onclick=function(e){
- alert('00');
- }
- div1.onclick=function(e){
- alert('11');
- }
- div2.onclick=function(e){
- alert('22');
- }
- } // 点击22222后,以次弹出22,11,00(事件冒泡)
(1)event.preventDefault()表示阻止默认事件发生:如a标签的跳转事件
我们给a标签添加该事件,则a不再跳转。
- div0.onclick=function(e){
- alert('11');
- e.preventDefault();
- }
(2)event.stopPropagation() 表示阻止冒泡事件发生:冒泡指的是向上层冒泡,不影响他的子元素
例如:我们给div1 添加阻止冒泡事件,div2依然会触发,但是div0不会。
- div1.onclick=function(e){
- alert('11');
- e.stopPropagation();
- }
- // 依次弹出 22, 11
event.stopPropagation()与event.preventDefault()的更多相关文章
- 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return fal的区别
今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...
- JS 之 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return false的区别
在前端开发中,有时我们需要阻止冒泡和阻止默认事件的发生. 一.event.stopPropagation() 阻止事件的冒泡,不让事件向documen上蔓延,但是默认事件任然会执行,当调用这个方法的时 ...
- event.stopPropagation(),event.preventDefault()和return false的区别
event.stopPropagation(),event.preventDefault()和return false的区别 1.event.stopPropagation()方法 这是阻止事件的冒泡 ...
- 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return false的区别
1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开, ...
- event.stopPropagation()和event.preventDefault()
1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开, ...
- event.stopPropagation()和event.preventDefault(),return false的区别
我写公司的官网遇到一个问题,轮播图的上一层有一块内容,用鼠标拖动那块内容的时候下一层的轮播图也会跟着拖动,而上面的那层的内容是不会动的,我想这就是冒泡事件在作祟了吧 跟冒泡事件相关的,我想到三个: 1 ...
- vue 中 event.stopPropagation() 和event.preventDefault() 使用
1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向document上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开 ...
- event.stopPropagation与event.preventDefault的区别
1.event.stopPropagation 停止事件的传播,阻止它被分配到其它Dom节点.但是不能阻止同一Dom节点上的其它事件句柄被调用. 注:不同Dom节点的事件必须是一致的.如父节点和子节点 ...
- event.stopPropagation()、event.preventDefault()与return false的区别
做小demo时经常用到return false来取消默认事件,但一直不是很懂它和preventDefault()等的区别,今天查了查文档和大神们的博客,在这里对相关知识点做一个总结 首先开门见山,总结 ...
随机推荐
- #Deep Learning回顾#之2006年的Science Paper
大家都清楚神经网络在上个世纪七八十年代是着实火过一回的,尤其是后向传播BP算法出来之后,但90年代后被SVM之类抢了风头,再后来大家更熟悉的是SVM.AdaBoost.随机森林.GBDT.LR.FTR ...
- A、B、C、D和E类IP地址
IP地址分为A,B,C,D,E五类. 网络号:用于识别主机所在的网络:主机号:用于识别该网络中的主机. 其中A类分配给政府机关使用,B类地址给大中型企业使用,C类地址给个人使用.这三种是主要的. IP ...
- 在docker容器中安装和使用,linux版的powershell
powershell 传教士 原创文章.始于 2016-09-18 ,2016-10-27修改powershell docker官网.允许转载,但必须保留名字和出处,否则追究法律责任 1 在任意版本的 ...
- linux基本常用命令列举
上回装完虚拟机中的linux系统了,进入找到terminal,打开命令行界面 pwd:展示目前为止绝对路径 cd cd~:跳转到/home/yy的位置 cd-:跳转到上一步的位置 cd path(绝对 ...
- CPU的大小端模式
不同体系结构的CPU,数据在内存中存放的排列顺序是不一样的. 存储器中对数据的存储是以字节(Byte)为基本单位的,因此,字(Word)和半字(Half-Word)在存储器中就有两种次序,分别称为:大 ...
- SQL Server 内置函数、临时对象、流程控制
SQL Server 内置函数 日期时间函数 --返回当前系统日期时间 select getdate() as [datetime],sysdatetime() as [datetime2] getd ...
- 第七篇——Mobile Apps,软件的曙光。
作业三: ShrinkWrap (在包装盒子里面的软件,软件在CD/DVD上): Web APP (基于网页的软件): Internal Software (企业或学校或某组织内部的软件): Game ...
- PHP 删除文件(图片)
/** * 删除图片或文件 * @author Zhenwei Zhang <772979140@qq.com> * @param string $pic 图片或文件地址 */functi ...
- 使用windows crypt API解析X509证书
一.版本号 结构体CERT_INFO中的字段dwVersion即为证书版本,可以直接通过下面的代码获得: DWORD dwCertVer = m_pCertContext->pCertInfo- ...
- docker push 实现过程
这一篇文章分析一下docker push的过程:docker push是将本地的镜像上传到registry service的过程: 根据前几篇文章,可以知道客户端的命令是在api/client/pus ...