标签：
<.1>
如果在页面中重叠了多个元素，并且重叠的这些元素都绑定了同一个事件，那么就会出
现冒泡问题。
触发的顺序是从小范围到大范围。
这就是所谓的冒泡现象，一层一层往上。
<html>
<head>
<title></title>
<script src="jquery-2.1.3.js"></script>
<style type="text/css">
div#a {
width: 500px;
height: 500px;
background-color: red;
}
div#b,div#d{
width: 300px;
height: 300px;
background-color: blue;
}
div#c,div#e{
width: 150px;
height: 150px;
background-color: yellow;
}
</style>
</head>
<body>
<!--阻止事件冒泡-->
<div id="a">
<div id="b">
<div id="c">
<a id="a_linkB" href="http:///www.hao123.com" target="_blank">好123导航</a>
</div>
</div>
</div>
<!--阻止事件的默认行为-->
<a id="a_linkA" href="http://www/baidu.com" target="_blank">百度</a>
<!--阻止表单提交-->
<form action="123.html">
<input id="sub" type="submit" value="提交" />
</form>
<!--阻止事件冒泡，并阻止该事件后的后续事件处理函数-->
<div id="d">
<div id="e">测试stopImmediatePropagation()取消事件冒泡，并取消该事件的后续事件处理函数</div>
</div>
</body>
</html><script type="text/javascript">
$(function () {
//--------------------------【1】stopPropagation() 禁止事件冒泡
$("div").click(function (e) {
//e.stopPropagation(); //禁止div元素绑定的click事件冒泡 。当然我们还可以禁止其他事件的冒泡，比如mouseOver..等等
})
$("#a").click(function () {
alert("我是A");
})
$("#b").click(function () {
alert("我是B");
})
$("#c").click(function (e) {
// e.stopPropagation(); //禁止id=c的div元素绑定的click事件冒泡
alert("我是C");
})
//-----------------------【2】preventDefault() 取消某个元素的默认行为
//网页中的元素，在操作的时候会有自己的默认行为。比如：右击文本框输入区域，会弹出系统菜单、点击超链接会跳转到指定页面、点击提交按钮会提交数据。这就是元素的默认行为。
$("#a_linkA").click(function (e) {
e.preventDefault(); //阻止id为a_link的这个超链接的默认行为，当你点击这个超链接的时候，就不会在进行跳转到指定的网页了。
})
//-------------------------------------禁止表单提交
$("#sub").click(function (e) {
e.preventDefault();//禁止表单提交 ； 禁止submit的默认提交行为。我们看到点击“提交”的时不再提交数据了。
})
//如果说你不想对submit按钮的click默认事件做阻止,（submit的click默认事件就是提交表单），而是仅仅是想阻止这个提交事件，我们就可以在form表单这进行
$("form").submit(function (e) {
e.preventDefault(); //禁止表单提交。推荐用法
});
//-------------------------------------同时阻止默认行为且禁止冒泡行为
$("#a_linkB").click(function (e) {
e.stopPropagation(); //禁止id=a_linkB这个<a>标签的click事件冒泡
e.preventDefault(); //禁止id=a_linkB这个<a>标签的click事件的默认行为（即：点击超链接不再有跳转的功能了）
//。这两个方法如果需要同时启用的时候 还有一种简写方案代替，就是直接return false。
//return false;
});
$("#a_linkB").click(function (e) {
alert(e.isDefaultPrevented()); //判断是否调用了preventDefault()方法 。即：判断是否阻止了#a_linkB元素的click事件的默认行为 打印出：true
alert(e.isPropagationStopped()); // 判断是否调用了stopPropagation()方法。即：判断是否阻止了#a_linkB元素的click事件冒泡 //打印出：true
})
//--------------------------【3】stopImmediatePropagation() 取消事件冒泡，并取消该事件的后续事件处理函数
$("#d").click(function () {
alert("我是D"); //测试冒泡
})
$("#e").click(function (e) {
e.stopImmediatePropagation(); //当我使用了这段代码后，下面那段$("#e").click(function () { alert("我还是E") }) 代码就不会再执行了。 而且也不会再执行$("#d").click(function () { alert("我是D");}) 这段代码了。因为stopImmediatePropagation()的作用就是阻止事件冒泡，【所以它就阻止了$("#d").click(function () { alert("我是D");})这段代码的执行】。 并且阻止事件的后续的处理函数【而下面那段$("#e").click(function () { alert("我还是E") }) 代码就是当前事件的后续事件。所以就又被阻止了】
alert("我是E");
alert(e.isImmediatePropagationStopped());//判断是否调用了stopImmediatePropagation()方法
})
$("#e").click(function (e) { //如果上面的那个函数使用了stopImmediatePropagation();方法，我将不会被执行到。（注意：我们都是#e元素的click事件哦，如果不是同的元素是不起作用的）
alert("我还是E")
})
})
</script>标签：
原文地址：http://blog.csdn.net/fanbin168/article/details/45013335
