<div id='div0'>
  <div id='div1'>
    <a href="#" id='div2'>2222</a>
  </div>
</div>

  1. window.onload=function(){
  2. var div0=document.getElementById('div0');
  3. var div1=document.getElementById('div1');
  4. var div2=document.getElementById('div2');
  5. div0.onclick=function(e){
  6. alert('00');
  7. }
  8. div1.onclick=function(e){
  9. alert('11');
  10. }
  11. div2.onclick=function(e){
  12. alert('22');
  13. }
  14.  
  15. } // 点击22222后,以次弹出22,11,00(事件冒泡)

(1)event.preventDefault()表示阻止默认事件发生:如a标签的跳转事件

我们给a标签添加该事件,则a不再跳转。

  1. div0.onclick=function(e){
  2. alert('11');
  3. e.preventDefault();
  4. }

(2)event.stopPropagation() 表示阻止冒泡事件发生:冒泡指的是向上层冒泡,不影响他的子元素

例如:我们给div1 添加阻止冒泡事件,div2依然会触发,但是div0不会。

  1. div1.onclick=function(e){
  2. alert('11');
  3. e.stopPropagation();
  4. }
  1. // 依次弹出 22, 11
  1.  
  1.  

event.stopPropagation()与event.preventDefault()的更多相关文章

  1. 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return fal的区别

    今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...

  2. JS 之 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return false的区别

    在前端开发中,有时我们需要阻止冒泡和阻止默认事件的发生. 一.event.stopPropagation() 阻止事件的冒泡,不让事件向documen上蔓延,但是默认事件任然会执行,当调用这个方法的时 ...

  3. event.stopPropagation(),event.preventDefault()和return false的区别

    event.stopPropagation(),event.preventDefault()和return false的区别 1.event.stopPropagation()方法 这是阻止事件的冒泡 ...

  4. 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return false的区别

    1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开, ...

  5. event.stopPropagation()和event.preventDefault()

    1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开, ...

  6. event.stopPropagation()和event.preventDefault(),return false的区别

    我写公司的官网遇到一个问题,轮播图的上一层有一块内容,用鼠标拖动那块内容的时候下一层的轮播图也会跟着拖动,而上面的那层的内容是不会动的,我想这就是冒泡事件在作祟了吧 跟冒泡事件相关的,我想到三个: 1 ...

  7. vue 中 event.stopPropagation() 和event.preventDefault() 使用

    1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向document上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开 ...

  8. event.stopPropagation与event.preventDefault的区别

    1.event.stopPropagation 停止事件的传播,阻止它被分配到其它Dom节点.但是不能阻止同一Dom节点上的其它事件句柄被调用. 注:不同Dom节点的事件必须是一致的.如父节点和子节点 ...

  9. event.stopPropagation()、event.preventDefault()与return false的区别

    做小demo时经常用到return false来取消默认事件,但一直不是很懂它和preventDefault()等的区别,今天查了查文档和大神们的博客,在这里对相关知识点做一个总结 首先开门见山,总结 ...

随机推荐

  1. #Deep Learning回顾#之2006年的Science Paper

    大家都清楚神经网络在上个世纪七八十年代是着实火过一回的,尤其是后向传播BP算法出来之后,但90年代后被SVM之类抢了风头,再后来大家更熟悉的是SVM.AdaBoost.随机森林.GBDT.LR.FTR ...

  2. A、B、C、D和E类IP地址

    IP地址分为A,B,C,D,E五类. 网络号:用于识别主机所在的网络:主机号:用于识别该网络中的主机. 其中A类分配给政府机关使用,B类地址给大中型企业使用,C类地址给个人使用.这三种是主要的. IP ...

  3. 在docker容器中安装和使用,linux版的powershell

    powershell 传教士 原创文章.始于 2016-09-18 ,2016-10-27修改powershell docker官网.允许转载,但必须保留名字和出处,否则追究法律责任 1 在任意版本的 ...

  4. linux基本常用命令列举

    上回装完虚拟机中的linux系统了,进入找到terminal,打开命令行界面 pwd:展示目前为止绝对路径 cd cd~:跳转到/home/yy的位置 cd-:跳转到上一步的位置 cd path(绝对 ...

  5. CPU的大小端模式

    不同体系结构的CPU,数据在内存中存放的排列顺序是不一样的. 存储器中对数据的存储是以字节(Byte)为基本单位的,因此,字(Word)和半字(Half-Word)在存储器中就有两种次序,分别称为:大 ...

  6. SQL Server 内置函数、临时对象、流程控制

    SQL Server 内置函数 日期时间函数 --返回当前系统日期时间 select getdate() as [datetime],sysdatetime() as [datetime2] getd ...

  7. 第七篇——Mobile Apps,软件的曙光。

    作业三: ShrinkWrap (在包装盒子里面的软件,软件在CD/DVD上): Web APP (基于网页的软件): Internal Software (企业或学校或某组织内部的软件): Game ...

  8. PHP 删除文件(图片)

    /** * 删除图片或文件 * @author Zhenwei Zhang <772979140@qq.com> * @param string $pic 图片或文件地址 */functi ...

  9. 使用windows crypt API解析X509证书

    一.版本号 结构体CERT_INFO中的字段dwVersion即为证书版本,可以直接通过下面的代码获得: DWORD dwCertVer = m_pCertContext->pCertInfo- ...

  10. docker push 实现过程

    这一篇文章分析一下docker push的过程:docker push是将本地的镜像上传到registry service的过程: 根据前几篇文章,可以知道客户端的命令是在api/client/pus ...