javascript中的事件冒泡

最新推荐文章于 2022-03-27 10:33:11 发布

个人知识管理布道师

最新推荐文章于 2022-03-27 10:33:11 发布

阅读量311

点赞数

分类专栏： JavaScript 文章标签： javascript 事件冒泡

本文链接：https://blog.csdn.net/u010689306/article/details/52905446

版权

JavaScript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
    <script type="text/javascript" charset="UTF-8" src="../jquery/jquery-1.8.0.min.js"></script>
    <style type="text/css">
         *{
             margin:0;padding:0;
         }
        body{
            font-size:13px;
            line-height:130%;
            padding:60px;
        }
        #content{
            width:220px;
            border:1px solid #0050D0;
            background:#96E555;
        }
        span{
            width:200px;
            margin:10px;
            background:#666666;
            cursor:pointer;
            color:white;
            display:block;
        }
        p{
            width:200px;
            background:#888;
            color:white;
            height: 16px;
        }
    </style>
</head>
<body>

<div id="content">
    外层div元素
    <span>内层span元素</span>
    外层div元素
</div>

<script type="text/javascript" charset="UTF-8">
     $("span").bind("click",function(event){
         alert("span clicked");
         //event.stopPropagation();阻止事件冒泡
     });
     $("#content").bind("click",function(event){
         alert("div clicked");
         //event.stopPropagation();阻止事件冒泡
     });
     $("body").bind("click",function(){
         alert("body clicked");
     });
</script>

</body>
</html>