<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()的更多相关文章

  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. onscroll

    var COUNT = 0, demo = document.getElementById('demo'); function testFn() {demo.innerHTML += 'testFN ...

  2. CentOS 静态IP设置

    一.CentOS 修改IP地址修改对应网卡的IP地址的配置文件 # vi /etc/sysconfig/network-scripts/ifcfg-eth0   电信 # vi /etc/syscon ...

  3. 使用CSS3动画模拟实现小球自由落体效果

    使用纯CSS代码模拟实现小球自由落体效果: html代码如下: <div id="ballDiv"> <div id="ball">&l ...

  4. VS2010里, using System.Data.OracleClient; 不可用

    当我试图去引用System.Data.OracleClient 这个命名空间时,VS 显示不存在 但是在对象浏览器里却可以找到这个命名空间及里边的对象 另外好像也没有区分清楚 using 和Refer ...

  5. 解决PyScripter中文乱码问题

    环境: PyScripter 2.6.0.0 python3.4 问题: PyScripter有个小坑,打开文件后中文都成了乱码.在PyScripter中新建的文件中文可以正常显示,但是重新打开后中文 ...

  6. web浏览器兼容简要整理

    ajax的创建 if (window.XMLHttpRequest) { var xhr = new XMLHttpRequest(); } else { //IE6及其以下版本浏览器 var xhr ...

  7. iOS7下隐藏status bar的详细研究

    info.plist文件中,View controller-based status bar appearance项设为YES,则View controller对status bar的设置优先级高于a ...

  8. Android测试关注点

    Android系统app测试,一般有native app原生,web app网页, hybird app混合 1.功能测试,考虑业务逻辑,主要手机和APP交互功能,来电,短信,闹钟可能对app造成的影 ...

  9. 面试题12:打印1到最大的n位数

    // 面试题12_打印1到最大的n位数.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> ...

  10. iOS8后core location框架启动定位服务的步骤

    1.在使用CoreLocation前需要调用如下函数[iOS 8专用]: iOS 8对定位进行了一些修改,其中包括定位授权的方法,CLLocationManager增加了下面的两个方法: (1)始终允 ...