<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()，当事件遇到他之后就会停止向父级冒泡，这样父节点的文字也就怒会收到影响了