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()等的区别,今天查了查文档和大神们的博客,在这里对相关知识点做一个总结 首先开门见山,总结 ...
随机推荐
- Bootstrap <基础三十二>模态框(Modal)插件
模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用 ...
- Newtonsoft.Json 序列化和反序列化 时间格式
From : http://www.cnblogs.com/litian/p/3870975.html 1.JSON序列化 string JsonStr= JsonConvert.SerializeO ...
- what is service?
SERVICE n.服务,服侍:服务业:维修服务:服役 vt.检修,维修:向…提供服务:保养:满足需要 adj.服务性的:耐用的:服现役的 更多详情:http://dict.baidu.com/s?w ...
- Ubuntu Install Java
http://linuxpilot.com/ubuntu-java class HelloWorld{public static void main(String[]arg){System.out.p ...
- SQL表旋转
在制作报表的时候,有时候会碰到基础资料是依照时间区间去一笔一笔记录的资料,但是使用者在看报表的时候想要将时间区间以横向的方式呈现不是直向的情况出现,又或者基础资料的表数据结构是横向的而使用者在看报表的 ...
- 【转】Nginx中upstream有以下几种方式:
1.轮询(weight=1) 默认选项,当weight不指定时,各服务器weight相同, 每个请求按时间顺序逐一分配到不同的后端服务器,如果后端服务器down掉,能自动剔除.upstream bak ...
- 如何使用.NET开发全版本支持的Outlook插件产品(二)——完善插件
插件项目所有代码都已经上传至 https://github.com/VanPan/TestOutlookAdding 勿在浮砂筑高台--定位错误 在介绍后面的插件开发技术之前,让我们先来看看已经达到的 ...
- jQueryNotes仿QQ空间添加标记
jquery-notes有以下特点: 支持添加备注图像 丰富的API 支持标记伸缩 支持更改主题 支持图片标记添加链接 不需要数据库 HTML 首先在页面上放置一张添加标志的图片 <div cl ...
- aspx在页面跳转(Response.Redirect)时丢失session问题及解决办法
[问题描述] 假设a.aspx.cs页面保存有Session["empid"]="3",当a.aspx.cs通过Response.Redirect(" ...
- 一个比较综合的项目--》>图片缓存,下拉刷新等
在办公室电脑(E:\workspace\23\Collections)