本文通过实例详细解析了事件冒泡的概念及其在JavaScript中的应用，并介绍了如何使用e.stopPropagation()来阻止事件冒泡，以及如何利用e.preventDefault()来阻止元素的默认行为。
<head>
<wbr><wbr><wbr> <title></title><br><wbr><wbr><wbr> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script><br> </head><br> <body><br><wbr><wbr><wbr> <table><br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> <tr><br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> <td><span>冒泡事件测试</span></td><br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> </tr><br><wbr><wbr><wbr> </table><br> </body></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
我们先看这段代码：
<wbr><wbr><wbr> <script type="text/javascript"><br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> $(function () {<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> $("table").click(function () { alert("table alert"); });<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> $("td").click(function () { alert("td alert"); });<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> $("span").click(function (){<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> alert("span alert");<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> });<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> });<br><wbr><wbr><wbr> </script></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
我们会看到这样的情况：span alert -> td alert -> table alert。这就叫事件冒泡。就是从下到上，从里到外，事件依次触发。
有的时候我们不希望事件冒泡咋办？
<wbr><wbr><wbr> <script type="text/javascript"><br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> $(function () {<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> $("table").click(function () { alert("table alert"); });<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> $("td").click(function () { alert("td alert"); });<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> $("span").click(function (e){<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> alert("span alert"); <wbr><wbr><wbr><wbr><wbr><br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> e.stopPropagation();<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> });<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> });<br><wbr><wbr><wbr> </script></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
如果想获得事件相关信息，就要给匿名方法加一个e对象，e就是事件对象。
<wbr></wbr>
e.preventDefault()阻止事件默认行为。
$("a").click(function (e) {
<wbr><wbr><wbr><wbr> alert("默认行为被禁止喽");<br><wbr><wbr><wbr><wbr> e.preventDefault();<br> });</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
<a href="http://www.baidu.com">测试</a>
<wbr></wbr>
<wbr></wbr>
return false等效于同时调用e.preventDefault()和e.stopPropagation()
<wbr></wbr>
return false除了阻止默认行为之外，还会阻止事件冒泡。如果手上有一份jquery源代码的话，可查看其中有如下代码：
if (ret===false){
event.preventDefault();
event.stopPropagation();
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
