事件冒泡

代码是这样的

<!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="width:100px; height:100px; background:#000; padding:50px">

<div onclick="showMsg(this,event)" id="inSide" style="width: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

http://www.cnblogs.com/12go/archive/2011/12/28/2304502.html

 

 

posted @ 2012-12-07 18:43  子夏子  阅读(230)  评论(0)  编辑  收藏  举报
yokoboy