<.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>
事件冒泡的顺序
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-1.11.2.js"></script>
</head>
<body>
<button>从我开始冒泡</button>
</body>
</html>
<script type="text/javascript">
$("body").click(function () {
alert("我是body");
})
$(document).click(function () {
alert("我是document");
});
$(window).click(function () {
alert("我是window");
})
$("button").click(function () {
alert("我是button");
})
</script>
首先弹出:我是button 然后弹出 我是body 然后弹出 我是document 最后弹出 我是window
说以冒泡的顺序就是:
button >body >document >window