JS的冒泡事件
什么是冒泡事件?
在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window) -摘自网络
这里使用简单的一个demo来演示一下js中的冒泡事件
效果图
布局
<div class="first_div">
最外层div
<div class="second_div">
中间层
<div class="third_div">
最里层
</div>
</div>
</div>
<div class="msg_div"></div>
也就是三个DIV分别为不同的背景色
CSS
<style type="text/css">
div {
border: solid 1px deepskyblue;
padding: 2em;
width: 30%
}
div .third_div {
background-color: red;
}
div .second_div {
background-color: deepskyblue;
}
.first_div {
height: auto;
background-color: lawngreen;
}
</style>
jquery添加事件并且在点击后有对应文本输出显示
<!--javascript代码-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" language="JavaScript">
// alert(parseInt(Math.floor(Math.random() * 10)));
$(function () {
$('.third_div').bind('click', function (event) {
func("你点击最里层DIV")
// event.stopPropagation();
// return false;
});
$('.second_div').bind('click', function (event) {
func("你点击了中间层DIV")
// event.stopPropagation();
// return false;
});
$('.first_div').bind('click', function (event) {
func("你点击了最外层DIV")
// event.stopPropagation();
// return false;
});
$('body').bind('click', function () {
func("你点击了body");
// event.stopPropagation();
// return false;
})
})
var colorArray = new Array("blue", "grey", "green", "red", "orangered", "darkviolet", "orange", "crimson", "chartreuse", "black");
var count = 0;
var func = function (str) {
count++;
var child = $("<div></div>");
child.css({
"color": colorArray[parseInt(Math.floor(Math.random() * 10))],
"border": "solid 1px grey",
"padding": "0.5em"
});
child.text(count + ":" + str);
$('.msg_div').append(child);
if (count % 3 === 0) {
count = 0;
$('.msg_div div:last-child').after("<hr>");
}
};
</script>
在最里层添加了阻止代码后效果
我们可以很明显的看到在使用了阻止的对应方法后,事件没有继续往上层走,被拦截在了当前这一层。
总结
阻止事件冒泡的几种方法
第一种: event.stopPropagation();
第二种: return false;
第三种: event.preventDefault();