事件冒泡
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>
以上是关于事件冒泡的主要内容，如果未能解决你的问题，请参考以下文章