<html> <head> <style> body { font-family:Fantasy; } ul.title { color:black; list-style:disc inside; font-weight:600; padding:8px 8px 8px 8px; cursor:hand; } ul.chapter { color:black; list-style:square inside; font-weight:600; padding:8px 8px 8px 8px; cursor:hand; } </style> <script type="text/javascript" src="http://www.cnblogs.com/resource/jquery.js"></script> <script type="text/javascript"> $(function(){ $("li.chapter").hide(); $("li").each(function(){ $(this).mouseover(function(){$(this).css("color","red"); return false;});}); $("li").each(function(){ $(this).mouseout(function(){$(this).css("color","black"); return false;});}); $("li.title").each(function(){ $(this).click(function(){mclick($(this))});}); $("li.chapter").each(function(){ $(this).click(function(event){alert("點擊的是："+$(this).text()); event.stopPropagation();});}); }); function mclick(e) { e.find("li").toggle(); } </script> </head> <body> <ul class="title"> <li class="title" >緒論<br/> <ul class="chapter"> <li class="chapter" >第一節</li> <li class="chapter" >第二節</li> </ul> </li> <li class="title" >第一章<br/> <ul class="chapter"> <li class="chapter" >第一節</li> <li class="chapter" >第二節</li> <li class="chapter" >第三節</li> </ul> </li> <li class="title">第二章<br/> <ul class="chapter"> <li class="chapter" >第一節</li> <li class="chapter" >第二節</li> <li class="chapter" >第三節</li> <li class="chapter" >第四節</li> </ul> </li> <li class="title">第三章<br/> <ul class="chapter"> <li class="chapter" >第一節</li> <li class="chapter" >第二節</li> <li class="chapter" >第三節</li> <li class="chapter" >第四節</li> <li class="chapter" >第五節</li> </ul> </li> </ul> </body> </html>
遇到的問題就是如何可以阻止事件冒泡，當鼠標移動到class = chapter標簽上的時候，本應只有該標簽下的文字變紅，但是問題就來了，他對應的class = title標簽內的文字也變紅了，因為就是在於當我們鼠標移動到chapter上他就會產生一個事件，然后出發它本身的mouseover事件，但是這個事件並沒有完，他還會繼續向上冒泡，這樣他的父節點title也會接受到這個事件，從而也會出發他的點擊事件，這樣他的字體也會變色。所以問題的關鍵就在於如何組織事件冒泡。
我在網上查到了很多種方法，並選擇了其中的一種event.stopPropagation()，當事件遇到他之后就會停止向父級冒泡，這樣父節點的文字也就怒會收到影響了