<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. wdcp 下apache模式开启https访问,支持多站点

    1.vi conf/httpd.conf 查找 #Include conf/extra/httpd-ssl.conf (删除行首的配置语句注释符号"#"保存退出) 2.vi con ...

  2. Winform 支持高清屏(High DPI) 设置

    http://www.cnblogs.com/weiym/p/3555068.htmlhttp://crsouza.com/2015/04/how-to-fix-blurry-windows-form ...

  3. 第六篇.bootstrap表格

    基本表格: <table class="table"> <tr><td>用户名</td><td>密码</td> ...

  4. 数组操作splice

    今天,实现某个功能时需要操作数组, var  array=[1,2,3,3,4]; console.log(array);           //结果: 1,2,3,3,4 var data=arr ...

  5. Comparison method violates its general contract 关于jdk自带算法问题

    昨晚上线,线上报了一个问题,用的jdk8,用的collections.sort方法, public static void main(String[] args) { List<Integer& ...

  6. JS数组中every(),filter(),forEach(),map(),some()方法学习笔记!

    ES5中定义了五种数组的迭代方法:every(),filter(),forEach(),map(),some(). 每个方法都接受两个参数:要在每一项运行的函数(必选)和运行该函数的作用域的对象-影响 ...

  7. linux 两个文件合并

    可以使用cat命令,有两种实现的方式,一种将两个文件合并的到一个新的文件,另一种将一个文件追加到另一个文件的末尾. 方法一:使用cat命令从文件中读入两个文件,然后将重定向到一个新的文件.这种方法可以 ...

  8. <script type="text/javascript" src="<%=path %>/pages/js/arsis/area.js?v=1.01"></script> 为什么在最后加? v+1.01

    不写也可以 是为了js改变以后 ,名字未变 ,如果原来有的浏览器加载 了,遇到相同名字的就是引用缓存,不在从新加载.会出现错误.加上后 会重新加载. css 引用后面也一样.

  9. 微信openid获取(php),

    在看这个的基础上有阅读过微信的相关文档, 这段url是给用户的,当用户点击进去后会出一个,确认登录授权,需要用户点击授权之后跳到你的授权回调地址(注意:下面php代码必须放在授权回调地址中:比如回调地 ...

  10. 【python】3.x,string与bytes的区别(文本,二进制数据)

    Python 3对文本和二进制数据作了更为清晰的区分.文本总是Unicode,由str类型表示, 二进制数据则由bytes类型表示. 不能拼接字符串和字节包,也无法在字节包里搜索字符串(反之亦然),也 ...