代码是这样的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("li").live("click", function (event) { $(this).css("color", "#FF3300"); }) }); </script> </head> <body> <ul> <li>第一行 <ul> <li>这是公告标题1</li> <li>这是公告标题2</li> </ul> </li> </ul> </body> </html>
现在通过Firebug来查看一下事件冒泡的效果。
刚开始是这样的，如下图所示：
当点击"这是公告标题1"时，不仅点击的 li 标签有了样式，父标签 li 也有了样式，这是我们不想得到的结果。
如果把代码改成这样，就能避免事件冒泡带来的麻烦。
$("li").live("click", function (event) {
$(event.target).css("color", "#FF3300");
})
event.target 可以获得事件源。
$("li").live("click", function (event) {
$(this).css("color", "#FF3300");
event.stopPropagation();
})
这样也可以，event.stopPropagation();这个是阻止事件冒泡的！
下面是阻止时间冒泡的例子。
<div onclick="showMsg(this,event)" id="outSide" style="100px; height:100px; background:#000; padding:50px"> <div onclick="showMsg(this,event)" id="inSide" style="100px; height:100px; background:#CCC"></div> </div> <script type="text/javascript"> //阻止事件冒泡后，你点击灰色盒子，整个过程只弹一次对话框了（注意与默认情况对比） function showMsg(obj,e) { alert(obj.id); stopBubble(e) } //阻止事件冒泡函数 function stopBubble(e) { if (e && e.stopPropagation) e.stopPropagation() else window.event.cancelBubble=true } </script>
参考：
http://www.cnblogs.com/webflash/archive/2009/08/23/1552462.html