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()等的区别,今天查了查文档和大神们的博客,在这里对相关知识点做一个总结 首先开门见山,总结 ...
随机推荐
- [开发笔记]-未找到与约束ContractName Microsoft.VisualStudio.Text.ITextDocumentFactoryService...匹配的导出【转载自:酷小孩】
原文地址:http://www.cnblogs.com/babycool/p/3199158.html 今天打算用VisualStudio2012做一个js效果页面测试的时候,打开VS2012新建项目 ...
- Visual Basic 2012 借助DataGridView控件将SQL server2012 数据导入到Excel 2010
摘 要: SQL Server 2012 数据和Excel 2010之间的连接和数据的传输,本篇文章主要针对的是SQL Server 2012 数据导入到Excel 2010文件中.Excel软件对 ...
- codeforces 501 C,D,E
C题意: 给定n个点(标号0~n-1)的度数(就是与其邻接的点的个数)和所有与它邻接的点标号的异或和,求满足这些条件的树的边应该是怎么连的,将边输出出来 这里可以理解成拓扑排序的方式考虑,当i度数为1 ...
- map的四种遍历方式
map是Java中非常常用的一种数据结构,但map不同于set和list都继承自Collection接口. 所以map没有实现Collection的Iterator 方法,自身没有迭代器来遍历元素. ...
- wpf初步-grid布局-连连看棋盘
private void Window_Loaded_1(object sender, RoutedEventArgs e) { //Button btn1 = new Button(); //btn ...
- Service Broker应用(1):简介、同server不同DB间的数据传输
简介:SQL Server Service Broker,以下简称SSB,是一种完全基于MSSQL数据库的数据处理技术,为短时间内处理大量数据提供了一种可靠.稳定.高效的解决方案.一次同步的数据最大可 ...
- HDOJ 题目2474 String painter(区间DP)
String painter Time Limit: 5000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)To ...
- 使用CSS3动画模拟实现小球自由落体效果
使用纯CSS代码模拟实现小球自由落体效果: html代码如下: <div id="ballDiv"> <div id="ball">&l ...
- JAVA开发相关
JAVA开发相关1. IntelliJ IDEA开发工具熟练使用2. Maven3. Spring框架(IoC.AOP) 1)数据库相关MyBatis 2)数据库连接池 3)事务.多数据源.跨数据库分 ...
- ListView.post(Runnable {})和ListView.postDelayed
1. boolean android.view.View.post(Runnable action): 是listview 继承 view,同样具有此方法 post(Runnable action) ...