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

    //当遇到button上添加图片,不显示图片,而显示蓝色,解决方案 //1.button的类型,改成UIButtonTypeCustom //2.button的set使用setBackgroundIm ...

  2. DataSet集合直接根据传入的类转List<T>集合

    最近比较忙,好久没写博客了.个人感觉最好的进步就是写东西.哈哈. 一般我们使用ADO.net从数据库中读取数据返回的集合是DataSet类型的.有时候我们需要进行转换成List<T>集合. ...

  3. JavaScript 对象的创建

    Object类型是JavaScript中使用最多的一种类型.创建Object实例的方式有多种,接下来一一列举. 1. Object构造函数 person1的friends属性修改影响了person2的 ...

  4. 【墙内备份】Android 6.0 APIs

    Android 6.0 APIs In this documentSHOW MORE Fingerprint Authentication Confirm Credential App Linking ...

  5. sqlServer数据库插入数据后返回刚插入记录的自增ID

    insert into tabls1(row1,row1) values('0','0') select @@IDENTITY

  6. Data Binding和INotifyPropertyChanged是如何协调工作的?

    前言 WPF的一大基础就是Data Binding.在基于MVVM架构的基础上,只有通过实现INotifyPropertyChanged接口的ViewModel才能够用于Data Binding. 要 ...

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

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

  8. Diwali

    转帖 今天是印度新年(Diwali), 全公司庆祝,午饭不要钱   一.不到美国不知道,三人行必有我师,二人行必有老印.. 一大早“春眠不觉晓,处处闻老印”:晚上遛个弯“举头望明月,低头见老印”:到山 ...

  9. 北大poj- 1067

    取石子游戏 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 40058   Accepted: 13520 Descripti ...

  10. LeetCode 094 Binary Tree Inorder Traversal

    方法一:(递归) class Solution { public: vector<int> inorderTraversal(TreeNode* root) { vector<int ...