為什么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
因為 ?第49行代碼?event.stopPropagation(); //阻止事件冒泡 ?
Id 為 content 的<div>在觸發 click 事件后是不會冒泡的,因此傳播到?<body> 節點,所以運行結果為“外層div元素被單擊”,同理,如果內層span元素被單擊,結果顯示為(1)“內層span元素被單擊”(2)“外層div元素被單擊”,第二個結果是由于span冒泡產生的,但由于?<div id="content">阻止了事件冒泡,所以冒泡就停留在了這層,不會繼續下去到body了。
2016-12-31
最佳答案和提問者是刷積分的嗎?
提問問的body點擊事件為什么點擊頁面沒有觸發,
最佳答案回答的Id 為 content 的 <div>的點擊事件的阻止冒泡事件。
最佳答案的這個阻止冒泡事件是全場通用的超級阻止冒泡事件嗎?函數體內一次聲明,全場全時段有效?!
2016-12-20
css設置中div浮動了,你給body加一個boder邊框,就知道body的范圍了,其實是比div小,點擊body是有觸發函數的
2016-11-13
大神,能解答一下:瀏覽器的默認行為有哪些?有哪些事件可以觸發瀏覽器的默認行為?