本文通过实例讲解了如何使用jQuery阻止事件冒泡及默认行为，并解释了事件对象的作用，包括e.stopPropagation()和e.preventDefault()的方法应用。
<head>
<wbr><wbr><wbr> <title></title><br><wbr><wbr><wbr> <s<a href="http://bit1024.com/Class.asp?ID=28" target="_blank"><span style="color:blue">c</span></a>ript sr<a href="http://bit1024.com/Class.asp?ID=28" target="_blank"><span style="color:blue">c</span></a>="S<a href="http://bit1024.com/Class.asp?ID=28" target="_blank"><span style="color:blue">c</span></a>ripts/jquery-1.4.1.js" type="text/javas<a href="http://bit1024.com/Class.asp?ID=28" target="_blank"><span style="color:blue">c</span></a>ript"></s<a href="http://bit1024.com/Class.asp?ID=28" target="_blank"><span style="color:blue">c</span></a>ript><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> <s<a href="http://bit1024.com/Class.asp?ID=28" target="_blank"><span style="color:blue">c</span></a>ript type="text/javas<a href="http://bit1024.com/Class.asp?ID=28" target="_blank"><span style="color:blue">c</span></a>ript"><br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> $(fun<a href="http://bit1024.com/Class.asp?ID=28" target="_blank"><span style="color:blue">c</span></a>tion () {<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> $("table").<a href="http://bit1024.com/Class.asp?ID=28" target="_blank"><span style="color:blue">c</span></a>li<a href="http://bit1024.com/Class.asp?ID=28" target="_blank"><span style="color:blue">c</span></a>k(fun<a href="http://bit1024.com/Class.asp?ID=28" target="_blank"><span style="color:blue">c</span></a>tion () { alert("table alert"); });<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> $("td").<a href="http://bit1024.com/Class.asp?ID=28" target="_blank"><span style="color:blue">c</span></a>li<a href="http://bit1024.com/Class.asp?ID=28" target="_blank"><span style="color:blue">c</span></a>k(fun<a href="http://bit1024.com/Class.asp?ID=28" target="_blank"><span style="color:blue">c</span></a>tion () { alert("td alert"); });<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> $("span").<a href="http://bit1024.com/Class.asp?ID=28" target="_blank"><span style="color:blue">c</span></a>li<a href="http://bit1024.com/Class.asp?ID=28" target="_blank"><span style="color:blue">c</span></a>k(fun<a href="http://bit1024.com/Class.asp?ID=28" target="_blank"><span style="color:blue">c</span></a>tion (){<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> </s<a href="http://bit1024.com/Class.asp?ID=28" target="_blank"><span style="color:blue">c</span></a>ript></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> <s<a href="http://bit1024.com/Class.asp?ID=28" target="_blank"><span style="color:blue">c</span></a>ript type="text/javas<a href="http://bit1024.com/Class.asp?ID=28" target="_blank"><span style="color:blue">c</span></a>ript"><br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> $(fun<a href="http://bit1024.com/Class.asp?ID=28" target="_blank"><span style="color:blue">c</span></a>tion () {<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> $("table").<a href="http://bit1024.com/Class.asp?ID=28" target="_blank"><span style="color:blue">c</span></a>li<a href="http://bit1024.com/Class.asp?ID=28" target="_blank"><span style="color:blue">c</span></a>k(fun<a href="http://bit1024.com/Class.asp?ID=28" target="_blank"><span style="color:blue">c</span></a>tion () { alert("table alert"); });<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> $("td").<a href="http://bit1024.com/Class.asp?ID=28" target="_blank"><span style="color:blue">c</span></a>li<a href="http://bit1024.com/Class.asp?ID=28" target="_blank"><span style="color:blue">c</span></a>k(fun<a href="http://bit1024.com/Class.asp?ID=28" target="_blank"><span style="color:blue">c</span></a>tion () { alert("td alert"); });<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> $("span").<a href="http://bit1024.com/Class.asp?ID=28" target="_blank"><span style="color:blue">c</span></a>li<a href="http://bit1024.com/Class.asp?ID=28" target="_blank"><span style="color:blue">c</span></a>k(fun<a href="http://bit1024.com/Class.asp?ID=28" target="_blank"><span style="color:blue">c</span></a>tion (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> </s<a href="http://bit1024.com/Class.asp?ID=28" target="_blank"><span style="color:blue">c</span></a>ript></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();
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
