问答详情
源自:6-2 jQuery事件对象的属性和方法

为什么body的点击事件只有id=msg的那个div里面能触发,body不是包含住整个页面吗

<!DOCTYPE html>

<html>


<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title></title>

    <style>

    body{

        background:green;

        }

    .left div,

    .right div {

        width: 500px;

        height: 100px;

        padding: 5px;

        margin: 5px;

        float: left;

        border: 1px solid #ccc;

    }

    

    .left div {

        background: #bbffaa;

    }

    

    .right div {

        background: yellow;

    }

    </style>

    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

</head>


<body>

    <h3>事件对象的属性与方法</h3>

    <div class="left">

        <div id="content">

            外层div元素

            <br />

            <span style="background: green;">内层span元素</span>

            <br /> 外层div元素

        </div>

        <br />

        <div id="msg"></div>

    </div>

    <script type="text/javascript">

    //为 <span> 元素绑定 click 事件  

    $("span").click(function() {

        $("#msg").html($("#msg").html() + "<p>内层span元素被单击</p>");

    });

    //为 Id 为 content 的 <div> 元素绑定 click 事件  

    $("#content").click(function(event) {

        $("#msg").html($("#msg").html() + "<p>外层div元素被单击</p>");

        event.stopPropagation(); //阻止事件冒泡  

    });

    //为 <body> 元素绑定 click 事件  

    $("body").click(function() {

        $("#msg").html($("#msg").html() + "<p>body元素被单击</p>");

    });

    </script>

</body>


</html>


提问者:我不是林俊杰 2016-11-03 14:45

个回答

  • 慕粉4277848
    2016-11-03 16:06:56
    已采纳

    因为  第49行代码 event.stopPropagation(); //阻止事件冒泡  

    Id 为 content 的<div>在触发 click 事件后是不会冒泡的,因此传播到 <body> 节点,所以运行结果为“外层div元素被单击”,同理,如果内层span元素被单击,结果显示为(1)“内层span元素被单击”(2)“外层div元素被单击”,第二个结果是由于span冒泡产生的,但由于 <div id="content">阻止了事件冒泡,所以冒泡就停留在了这层,不会继续下去到body了。

  • IT自学
    2016-12-31 22:52:35

    最佳答案和提问者是刷积分的吗?

    提问问的body点击事件为什么点击页面没有触发,

    最佳答案回答的Id 为 content 的 <div>的点击事件的阻止冒泡事件。

    最佳答案的这个阻止冒泡事件是全场通用的超级阻止冒泡事件吗?函数体内一次声明,全场全时段有效?!

  • 大块吃肉188
    2016-12-20 22:38:08

    css设置中div浮动了,你给body加一个boder边框,就知道body的范围了,其实是比div小,点击body是有触发函数的

  • 猎风的雄鹰
    2016-11-13 16:16:37

    大神,能解答一下:浏览器的默认行为有哪些?有哪些事件可以触发浏览器的默认行为?