js html 事件冒泡
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width:100px; height:200px; border: 1px solid red; display: none;}
</style>
点击按钮显示div1,点击按钮其余地方隐藏div1,点击按钮其余地方会因为冒泡触发document的点击事件所以这里只需要写document的点击事件隐藏div1就可以实现点击其余地方都让div1隐藏。
<script>
window.onload = function() {
/*
事件冒泡：点击子级元素接收到事件后，会把他接收到的事件传播给他的父级，也就是父级也会接收到子级的事件，一直到document,window。
调用var ev=ev||event,ev.cancelBubble=false阻止向父类冒泡，
阻止冒泡 : 当前要阻止冒泡的事件函数中调用 event.cancelBubble = true;
*/
var oBtn = document.getElementById('btn');
var oDiv = document.getElementById('div1');
oBtn.onclick = function(ev) {
var ev = ev || event;
ev.cancelBubble = true;//阻止当前对象的当前事件的冒泡,不出发document的点击事件又让div1隐藏了。
oDiv.style.display = 'block';
}
document.onclick = function() {//点击p也会出发document点击事件因为冒泡，实现点击非按钮任意地方让div1的隐藏。
/*setTimeout(function() {
oDiv.style.display = 'none';
}, 1000);*/
oDiv.style.display = 'none';
}
}
</script>
</head> <body>
<input type="button" value="按钮" id="btn" />
<div id="div1"></div>
<p>ppppp</p>
<p>ppppp</p>
<p>ppppp</p>
<p>ppppp</p>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width: 100px; height: 200px; background: red; position: absolute; left: -100px; top: 100px;}
#div2 {width: 30px; height: 60px; position: absolute; right: -30px; top: 70px; background: black; color: white; text-align: center;}
</style>
<script>
window.onload = function() {
//只需要对div1加事件，因为div2接收到事件会冒泡传递给div1。
var oDiv = document.getElementById('div1');
oDiv.onmouseover = function() {
this.style.left = '0px';
}
oDiv.onmouseout = function() {
this.style.left = '-100px';
}
}
</script>
</head>
<body>
<div id="div1">
<div id="div2">分享到</div>
</div>
</body>
</html>
js html 事件冒泡的更多相关文章
- 浅谈js的事件冒泡机制
很多人都听说过,js的事件冒泡机制,其实,这个说法还是比较生动形象的,就是一个水泡在水底下,冒泡到水面的过程. 那js的事件冒泡机制呢,就是一个DOM树,一级一级向上冒的过程,最终是到document ...
- vue.js阻止事件冒泡和默认事件
首先我们来看原生JS取消事件冒泡方法: e.stopPropagation(); //非IE浏览器window.event.cancelBubble = true; //IE浏览器 原生JS阻止默认事 ...
- js阻止浏览器、元素的默认事件与js阻止事件冒泡、阻止事件流
嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下js阻止默认事件与js阻止事件冒泡示例,大家参考使用吧 1. event.prev ...
- js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获
js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获 一.总结 一句话总结:他们是描述事件触发时序问题的术语.事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件.相反的,事件 ...
- js的事件冒泡机制
js的事件冒泡机制呢,就是一个DOM树,一级一级向上冒的过程,最终是到document这个根节点这里.js的事件冒泡机制,就像是一个水泡在水底下,冒泡到水面的过程. 摘自醉清玄
- JS阻止事件冒泡
在使用JS事件的时候,外层元素事件有可能被里层元素的事件触发,例如点击里层元素外层也触发了点击,这种现象称为事件冒泡.(李昌辉) <div id="wai"> < ...
- js 阻止事件冒泡和默认行为 preventDefault、stopPropagation、return false
preventDefault: preventDefault它是事件对象(Event)的一个方法,作用是取消一个目标元素的默认行为.既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就 ...
- js 停止事件冒泡 阻止浏览器的默认行为（阻止超连接 # ）
在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...
- JS中 事件冒泡与事件捕获
[JS中的事件流] 1.事件冒泡:当某DOm元素触发一种事件时,会从当前节点开始,逐级往上触发其祖先节点的同类型事件,直到DOM根节点: >>>什么情况下会产生事件冒泡 ① D ...
- js中事件冒泡，事件捕获详解
一.事件流 事件是js与HTML交互的基础,事件流描述的是页面接受事件的顺序,而事件流又分为三个阶段:捕获阶段.目标阶段和冒泡阶段. 如果单纯的事件处理,事件捕获和事件冒泡二选一即可,导致两者并存的原 ...
随机推荐
- arXiv 2015深度学习年度十大论文
由康奈尔大学运营维护着的arXiv网站,是一个在学术论文还未被出版时就将之向所有人开放的地方.这里汇聚了无数科学领域中最前沿的研究,机器学习也包括在内.它反映了学术界当前的整体趋势,我们看到,近来发布 ...
- 五大最佳开源java性能监控工具
如果你正在寻找性能监控工具,不妨看看以下推荐的这五款开源工具,这些工具目前已经可以替代付费工具了,你可以看看是否是你的最佳选择.本文推荐的五款开源工具目前是开源社区中最受欢迎的. 1. Stagemo ...
- Reentrant protected mode kernel using virtual 8086 mode interrupt service routines
A method for allowing a protected mode kernel to service, in virtual 8086 mode, hardware interrupts ...
- Ubuntu PostgreSql主从切换
主机:192.168.100.70 从机:192.168.100.71 通用配置(即主从都要配置) 修改/etc/postgresql/10/main/pg_hba.conf host all all ...
- 使用iTools、PP助手清理垃圾前后文件夹对照图
1.1 documents清理前 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveHl4am4=/font/5a6L5L2T/fontsize/400/fi ...
- 一步一步跟我学习hadoop(7)----hadoop连接mysql数据库运行数据读写数据库操作
为了方便 MapReduce 直接訪问关系型数据库(Mysql,Oracle).Hadoop提供了DBInputFormat和DBOutputFormat两个类.通过DBInputFormat ...
- 关于Blog使用
1.网易博客http://inowtofuture.blog.163.com/blog/#m=0 使用时间:2011年8月-2012年2月 记录内容:主要记录本科參加ACM期间在POJ(北京大学OJ) ...
- Android集成一个新产品时，lunch的product name和device name注意事项
Android系统lunch一个当前的Product大概流程包括下面几个部分: 1. lunch确定TARGET_PRODUCT.一般位于vendor/device/build/target/prod ...
- JAVA设计模式之【组合模式】
组合模式 用面向对象的方式来处理树形结构 组合多个对象形成树形结构以表示具有"整体-部分"关系的层次结构. 在组合模式中引入了抽象构件类Component,它是所有容器类和叶子类的 ...
- hdoj--4325--Flowers(线段树+二分)
Flowers Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Total Su ...