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()等的区别,今天查了查文档和大神们的博客,在这里对相关知识点做一个总结 首先开门见山,总结 ...
随机推荐
- UIControl
//当遇到button上添加图片,不显示图片,而显示蓝色,解决方案 //1.button的类型,改成UIButtonTypeCustom //2.button的set使用setBackgroundIm ...
- DataSet集合直接根据传入的类转List<T>集合
最近比较忙,好久没写博客了.个人感觉最好的进步就是写东西.哈哈. 一般我们使用ADO.net从数据库中读取数据返回的集合是DataSet类型的.有时候我们需要进行转换成List<T>集合. ...
- JavaScript 对象的创建
Object类型是JavaScript中使用最多的一种类型.创建Object实例的方式有多种,接下来一一列举. 1. Object构造函数 person1的friends属性修改影响了person2的 ...
- 【墙内备份】Android 6.0 APIs
Android 6.0 APIs In this documentSHOW MORE Fingerprint Authentication Confirm Credential App Linking ...
- sqlServer数据库插入数据后返回刚插入记录的自增ID
insert into tabls1(row1,row1) values('0','0') select @@IDENTITY
- Data Binding和INotifyPropertyChanged是如何协调工作的?
前言 WPF的一大基础就是Data Binding.在基于MVVM架构的基础上,只有通过实现INotifyPropertyChanged接口的ViewModel才能够用于Data Binding. 要 ...
- 使用CSS3动画模拟实现小球自由落体效果
使用纯CSS代码模拟实现小球自由落体效果: html代码如下: <div id="ballDiv"> <div id="ball">&l ...
- Diwali
转帖 今天是印度新年(Diwali), 全公司庆祝,午饭不要钱 一.不到美国不知道,三人行必有我师,二人行必有老印.. 一大早“春眠不觉晓,处处闻老印”:晚上遛个弯“举头望明月,低头见老印”:到山 ...
- 北大poj- 1067
取石子游戏 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 40058 Accepted: 13520 Descripti ...
- LeetCode 094 Binary Tree Inorder Traversal
方法一:(递归) class Solution { public: vector<int> inorderTraversal(TreeNode* root) { vector<int ...