你知道JQuery中的事件冒泡吗，他是怎么执行的，如何来停止冒泡事件？
事件冒泡
首先需要知道什么是事件冒泡？
事件冒泡是从里面的往外面开始触发的，就是点击子节点，会向上触发父节点，祖先节点的点击事件
demo：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>4-4-1</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-size: 13px;
line-height: 130%;
padding: 60px;
}
#content {
width: 220px;
border: 1px solid #0050D0;
background: #96E555;
}
span {
width: 200px;
margin: 10px;
background: #666666;
cursor: pointer;
color: white;
display: block;
}
p {
width: 200px;
background: #888;
color: white;
height: 16px;
}
</style>
<script src="../scripts/jquery-1.3.1.js"></script>
<script type="text/javascript">
$(function () {
// 为span元素绑定click事件
$('span').bind("click", function () {
$("#msg").append("<p>内层span元素被点击.<p/>")
});
// 为div元素绑定click事件
$('#content').bind("click", function () {
$("#msg").append("<p>外层div元素被点击.<p/>")
});
//// 为body元素绑定click事件
$("body").bind("click", function () {
$("#msg").append("<p>body元素被点击.<p/>")
});
})
</script>
</head>
<body>
<div id="content">
外层div元素
<span>内层span元素</span>
外层div元素
</div>
<div id="msg"></div>
</body>
</html>
当点击内层的span事件时，外层的div事件和body，也会执行的。
如何阻止冒泡事件？
一般来说有三种方法：
- 使用stopstopPropagation；
- 使用retrun false;
- 使用阻止默认行为preventDefault；
1.使用stopstopPropagation
只需要在后面加入event.stopPropagation();就可以阻止事件冒泡
$('span').bind("click", function () {
$("#msg").append("<p>内层span元素被点击.<p/>")
event.stopPropagation();
});2.使用retrun false；
$('span').bind("click", function () {
$("#msg").append("<p>内层span元素被点击.<p/>")
return false;
});3.使用阻止默认行为
retrun false和 stopstopPropagation的区别
return false 不仅阻止了事件往上冒泡，而且阻止了事件本身。
event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身。
