事件冒泡

Posted 坚强的小蚂蚁

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了事件冒泡相关的知识,希望对你有一定的参考价值。

 

 

1. 什么是事件冒泡 
在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序;如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。

2. 事件冒泡的作用 
事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获事件。

3. 阻止事件冒泡 
事件冒泡机制有时候是不需要的,需要阻止掉,通过 event.stopPropagation() 来阻止

4. 阻止右键菜单

可以在网页上阻止按鼠标右键弹出的默认菜单,然后可以自定义菜单

$(document).contextmenu(function(event) {
    event.preventDefault();
});

5. 合并阻止事件冒泡和右键菜单

实际开发中,一般把阻止冒泡和阻止默认行为合并起来写,如下

// event.stopPropagation();
// event.preventDefault();

// 合并写法:
return false;

 

 

例子1,验证事件冒泡,搞个三层结构div,并分别定义样式,效果图如下

冒泡的实际效果是:点击红色的子div后,会相继弹出后续的所有click事件。

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		
		.grandfather{
			width:300px;
			height:300px;
			background-color:green;
			position:relative;
		}

		.father{
			width:200px;
			height:200px;
			background-color:gold;
		}

		.son{
			width:100px;
			height:100px;
			background-color:red;
			position:absolute;
			left:0;
			top:400px;
		}

	</style>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){

			$(\'body\').click(function() {
				alert(4);
			});

			$(\'.grandfather\').click(function() {
				alert(3);
			});


			
			$(\'.father\').click(function() {
				alert(2);
			});
			

			$(\'.son\').click(function(ev) {  //function中ev的解释:发生click动作时,系统会自动产生一个event对象,这个event可随意写,这里写成了ev
				alert(1);

				//ev.stopPropagation(); 加上stopPropagation()后,只会弹出1的框,后续的不会弹出,也就是阻止了事件冒泡
				//console.log(ev); 用这个可以看到event对象的所有属性
				//alert(ev.clientX); 比如弹出其中的一个event属性:clientX,鼠标点击的X坐标

				return false;

			});



			$(document).contextmenu(function(event) {
    			//event.preventDefault();  阻止网页默认右键菜单
    			return false;
			});



		});


	</script>
</head>
<body>
	<div class="grandfather">
		<div class="father">
			<div class="son"></div>
		</div>
	</div>
</body>
</html>

  

 

 

例子2:弹框--阻止事件冒泡

效果图如下,基本功能是:点击弹出按钮,弹出提示信息框,点击里面的关闭按钮,关闭提示信息框。

 

1. 如果想点整个页面的其他空白地方,也能关闭提示信息框,应该加上如下代码

$(document).click(function(event) {
	$(\'#pop\').hide();			
});

但是这样会有一个问题,当点击弹出按钮时,会执行$(\'#pop\').show(),根据事件冒泡,$(document)中的$(\'#pop\').hide()也会触发,因此最后的效果是什么也不显示。解决方法是,在弹出按钮中阻止事件冒泡,也就是加上一行return false;

 

2. 但是现在有一个问题,就是在点击信息提示框中的空白处,也会关闭这个提示框,这对于里面有input属性要输入内容时,是个BUG,怎么解决

只需要在信息提示框里加上阻止事件冒泡

$(\'.pop\').click(function() {
	return false;
});

 

 

源码如下

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	
	<style type="text/css">

		.pop_con{
			display:none;
		}
		
		.pop{
			width:400px;
			height:300px;
			background-color:#fff;
			border:1px solid #000;
			position:fixed;
			left:50%;
			top:50%;
			margin-left:-200px;
			margin-top:-150px;
			z-index:9999;
		}

		.mask{
			position:fixed;
			width:100%;
			height:100%;
			background-color:#000;
			left:0;
			top:0;
			opacity:0.3;
			filter:alpha(opacity=30);
			z-index:9990;		
		}


	</style>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){

			$(\'#btn\').click(function() {
				$(\'#pop\').show();
				return false;
			});

			$(\'#shutoff\').click(function() {
				$(\'#pop\').hide();
			});


			$(document).click(function(event) {
				$(\'#pop\').hide();			
			});

			$(\'.pop\').click(function() {
				return false;
			});

		})


	</script>
</head>
<body>
	<h1>首页标题</h1>
	<p>页面内容</p>
	<input type="button" name="" value="弹出" id="btn">


	<div class="pop_con" id="pop">
		<div class="pop"> //提示信息框
			<h3>提示信息!</h3>
			<a href="#" id="shutoff">关闭</a>
			<input type="text" name="">
		</div>
		
		<div class="mask"></div>
	</div>
	
</body>
</html>

  

以上是关于事件冒泡的主要内容,如果未能解决你的问题,请参考以下文章

js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件

事件冒泡和阻止事件冒泡

事件冒泡以及取消事件冒泡方法

阻止事件冒泡和阻止后续代码执行

一个DOM元素绑定多个事件时,先执行冒泡还是捕获

一个DOM元素绑定多个事件时,先执行冒泡还是捕获