-----------------------------------題記
最近項目需求：點擊出現一個塊，再次點擊消失，繼續點擊關閉，並且點擊空白處該塊消失。那麼在這個在這個功能的完成中，因情況需要使用到了live和bind兩種事件綁定功能，而使用這兩種事件綁定的標籤存在父子關係，然後，在測試的過程中控制事件傳播的時候出現了些狀況，使用event.stopPropagation()在子標籤事件處還是在父標籤事件處是根據該事件傳播是冒泡還是捕捉（冒泡：如單擊子標籤，那麼先觸發子標籤的click事件，再依次觸發父標籤的click事件。捕捉：相反。）。所以浪費了大量的事件才調試好，最後還是不明白是什麼情況，於是就做出瞭如下的測試。
-----------------------------------代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function() {
//使用live添加事件時，不能使用父子關係進行綁定
// $("#child").live("click", function(event) {
// alert("child");
// });
// $("#child").parents("div").live("click", function(event) {
// alert("parent");
// });
//使用bind添加事件時，可以使用父子關係進行綁定
$("#parent").bind("click", function(event) {
alert("parent");
});
$("#parent").children().bind("click", function(event) {
// event.stopPropagation();//冒泡在child處停止事件傳播
alert("child");
});
//兩bind
$("#one-p").bind("click", function(event) {
alert("parent");
});
$("#one-c").bind("click", function(event) {
// event.stopPropagation();//冒泡在child處停止事件傳播
alert("child");
});
//兩live
$("#two-p").live("click", function(event) {
alert("parent");
});
$("#two-c").live("click", function(event) {
// event.stopPropagation();//冒泡在child處停止事件傳播
alert("child");
});
//父live子bind
$("#three-p").live("click", function(event) {
alert("parent");
});
$("#three-c").bind("click", function(event) {
// event.stopPropagation();//冒泡在child處停止事件傳播
alert("child");
});
//父bind子live
$("#four-p").bind("click", function(event) {
// event.stopPropagation();//捕獲在parent處停止事件傳播
alert("parent");
});
$("#four-c").live("click", function(event) {
alert("child");
});
});
</script>
<body>
<div id="parent">
<input id="child" type="button" value="click" />
</div>
<div id="one-p">
<input id="one-c" type="button" value="click" />
<span>parent -> bind & child -> bind ==> 冒泡</span>
</div>
<div id="two-p">
<input id="two-c" type="button" value="click" />
<span>parent -> live & child -> live ==> 冒泡</span>
</div>
<div id="three-p">
<input id="three-c" type="button" value="click" />
<span>parent -> live & child -> bind ==> 冒泡</span>
</div>
<div id="four-p">
<input id="four-c" type="button" value="click" />
<span>parent -> bind & child -> live ==> 捕獲</span>
</div>
</body></html>-----------------------------------總結
1.使用live綁定事件的時候，不能利用操作父子關係來綁定標籤的事件。
2.標籤存在父子關係的時候：只有再父標籤爲bind，子標籤爲live的時候事件傳播爲捕獲。那麼在事件傳播爲捕獲的話只能在父標籤綁定的事件處停止事件的傳播，相反爲冒泡的話，則在子標籤綁定的事件處停止事件的傳播。