事件冒泡 : 当一个元素接收到事件的时候，会把他接收到的所有传播给他的父级，一直到顶层window.事件冒泡机制

阻止冒泡 : 当前要阻止冒泡的事件函数中调用 event.cancelBubble = true;

事件函数绑定：
　　
　　//oDiv1.onclick = fn1;  给oDiv加点击事件，给事件绑定一个函数。





<script>

　　window.onload = function() {

    var oBtn = document.getElementById('btn');

    var oDiv = document.getElementById('div1');

    oBtn.onclick = function(ev) {

        var ev = ev || event;

        ev.cancelBubble = true;　　//阻止当前对象的当前事件的冒泡

        oDiv.style.display = 'block';

    };

    document.onclick = function() {

        oDiv.style.display = 'none';

    }

　　}

</script>




=====================================================================

以下是利用事件冒泡机制的例子：





<body>

　　<div id="div1">

　　　　<div id="div2">分享到</div>

　　</div>

</body>

<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() {

    var oDiv = document.getElementById('div1');

　　　　//只给父级div1添加事件函数，这样子级触发事件的时候也会执行父级的函数

    oDiv.onmouseover = function() {

        this.style.left = '0px';

    }

    oDiv.onmouseout = function() {

        this.style.left = '-100px';

    }

}

</script>




 
												


											
事件冒泡 & 阻止事件冒泡的更多相关文章
	

    
						
  1. javascript的事件冒泡,阻止事件冒泡和事件委托， 事件委托是事件冒泡的一个应用。
		
    首先,弄明白js 当中,什么是事件,事件模型在js中是如何设计的.什么是事件冒泡? 什么是“事件冒泡”呢?假设这里有一杯水,水被用某种神奇的方式分成不同颜色的几层.这时,从最底层冒出了一个气泡,气泡会 ...
    
		
    2. 
						
  2. ng-change事件中如何获取$event和如何在子元素事件中阻止调用父级元素事件（阻止事件冒泡）
		
    闲聊: 今天小颖要实现一个当改变了select内容后弹出一个弹框,并且点击select父元素使得弹框消失,这就得用到阻止事件的冒泡了:$event.stopPropagation(),然而小颖发现,在 ...
    
		
    3. 
						
  3. jQuery--事件, 事件绑定, 阻止事件冒泡, 事件委托,页面载入后函数
		
    1.常用事件, 按住shift键实现同步选择效果,搜索框联想效果 2.阻止事件冒泡 3.事件委托 4.使用 $(document).ready(function (){...}) 实现文件加载完绑定事 ...
    
		
    4. 
								
  4. javascript - 事件详解（阻止事件冒泡+阻止事件行为）
		
    一.事件流 1.事件流 描述的是在页面中接受事件的顺序 2.事件冒泡 由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点 (最具体 –> 最不具体) 3.事件捕获 最不具体的节点先接收事 ...
    
		
    5. 
						
  5. s事件之event.preventDefault()与event.stopPropagation()的阻止默认事件和阻止事件冒泡的用法
		
    event.preventDefault()用法介绍 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作).例如,如果 type 属性是 "submit" ...
    
		
    6. 
						
  6. javascript里阻止事件冒泡
		
    如下图所示,灰色块包含红色块,假设我们为灰色和红色块各绑定一个单击弹框事件,当我们点击红色块时,不希望触发灰色块的弹框事件,这就需要阻止冒泡事件了. IE里阻止冒泡事件使用cancelBubble属性 ...
    
		
    7. 
						
  7. javascript 阻止事件冒泡和阻止默认事件对比
		
    公司项目有像上图中效果的功能需求这也是很常见功能很简单功能,通过一个小例子和大家聊聊js的事件冒泡和默认事件. 先说说一般的实现方式即使用阻止事件冒泡的方式去做,给input绑定一个click事件(并 ...
    
		
    8. 
						
  8. JAVAscript——菜单下拉列表练习(阻止事件冒泡)
		
    下拉列表框,鼠标点击文本框,出现下拉,鼠标(离开的时候或者点击网页其他位置时)下拉列表消失.鼠标放到下拉列表的某一项上变背景色,点击下拉列表的某一项将该项的值显示在文本框内,然后下拉列表消失. < ...
    
		
    9. 
						
  9. js  事件流和事件冒泡阻止
		
    js 事件流和事件冒泡阻止 事件流 当浏览器发展到第四代的时候(IE4与Netscape4)浏览器开发团队遇到一个有意思的的问题: 页面的哪一部分会拥有某个特定的事件? 比如在纸上画上一组同心圆,如果 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Linux 开机引导和启动过程详解
			
    你是否曾经对操作系统为何能够执行应用程序而感到疑惑?那么本文将为你揭开操作系统引导与启动的面纱. 理解操作系统开机引导和启动过程对于配置操作系统和解决相关启动问题是至关重要的.该文章陈述了 GRUB2 ...
    
			
    2. 
						
  2. ul下的li浮动，如何是ul有li的高度
			
    此时ul展示的界面为: ①给ul加上一个样式,display:inline-block; <html> <head> <title>float</title& ...
    
			
    3. 
						
  3. PTA 螺旋方阵
			
    所谓"螺旋方阵",是指对任意给定的NNN,将1到N×NN\times NN×N的数字从左上角第1个格子开始,按顺时针螺旋方向顺序填入N×NN\times NN×N的方阵里.本题要求 ...
    
			
    4. 
						
  4. H5+JS实现手机摇一摇功能
			
    在做微信活动页面的时候,经常会需要实现手机摇一摇功能,比如“摇一摇,拿好礼”. 为了实现它,就需要用到HTML5的DeviceOrientation特性.它提供的DeviceMotion事件封装了设备 ...
    
			
    5. 
						
  5. git 命令参考手册
			
    你的本地仓库由 git 维护的三棵“树”组成.第一个是你的 工作目录,它持有实际文件:第二个是 缓存区(Index),它像个缓存区域,临时保存你的改动:最后是 HEAD,指向你最近一次提交后的结果.  ...
    
			
    6. 
						
  6. LuoguP2657 [SCOI2009]windy数 【数位dp】By cellur925
			
    题目传送门 题目大意:在A和B之间,包括A和B,总共有多少个不含前导零且相邻两个数字之差至少为2的正整数? 显然是数位dp啦=w=. 显然与上一位有关,我们$dfs$的时候就要记录$pre$.因为这是 ...
    
			
    7. 
						
  7. 安装截图软件shutter
			
    直接进入软件中心安装吧 不知道软件中心安装的软件可以apt upgrade 命令更新么 应该是可以的,感觉软件中心就是个图形化的apt和新立得差不多 shutter可以放大缩小截图, ctrl + 鼠 ...
    
			
    8. 
						
  8. tarjan有向图的强连通
			
    强连通:在有向图G中,两个顶点间至少存在一条路径,则两个点强连通. 强连通图:在有向图中,每两个顶点都强连通,则有向图G就是一个强连通图. 强连通分量:在非强连通图中的极大强连通子图,就称为强连通分量 ...
    
			
    9. 
						
  9. 使用Git分布式版本控制系统
			
    GIT(分布式版本控制系统) Git是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目.   Git是一个开源的分布式版本控制系统,可以有效.高速的处理从很小到非常大的项目版本 ...
    
			
    10. 
						
  10. [LuoGu]P2664 树上游戏
			
    Portal 这题真的好. 看到树上路径, 脑子里就要点分治 这一题对于每个点都要计算一遍, 如果暴算实在不好算, 这样我们就可以考虑算贡献. 直接计算每种颜色的贡献. 因为一条过重心的路径中, 可能 ...
    
			
    11.