點擊頁面其它地方隱藏該div的兩種思路

思路一

第一種思路分兩步

第一步：對document的click事件綁定事件處理常式，使其隱藏該div

第二步：對div的click事件綁定事件處理常式，阻止事件冒泡，防止其冒泡到document，而調用document的onclick方法隱藏了該div。
複製代碼 代碼如下:
<script type="text/javascript">
function stopPropagation(e) {
if (e.stopPropagation)
e.stopPropagation();
else
e.cancelBubble = true;
}

$(document).bind('click',function(){
$('#test').css('display','none');
});

$('#test').bind('click',function(e){
stopPropagation(e);
});
</script>

這樣當點擊頁面非div地區的時候，直接或層層冒泡會調用document的onclick方法，隱藏該div，而點擊div或其子項目的時候，事件總會冒泡的div本身，這時候會阻止事件繼續冒泡，不會調用doument的onclick方法致使div被隱藏，從而完成了我們的需求。

思路二

我們之前提到，在觸發DOM上的某個事件的時候會產生一個事件對象event，這個對象包含著所有與事件有關的資訊，包括產生事件的元素、事件類型等相關資訊，思路一中div的click事件處理常式傳入的參數就是這個event對象。訪問IE中的event對象有幾種不同的方式，取決於指定事件處理常式的方法。直接為DOM元素添加事件處理常式時，event對象作為window對象的一個屬性存在。

event對象包含了一個重要屬性：target(W3C)/srcElement(IE)，這個屬性標識了觸發事件的原始元素，思路二就是要利用這個屬性。我們可以直接對document的click事件綁定事件處理常式，在事件處理常式中判讀事件來源是否為id==test的div元素或其子項目，如果是則方法return不做操作，如果不是則隱藏該div。
複製代碼 代碼如下:
<script type="text/javascript">
$(document).bind('click',function(e){
var e = e || window.event; //瀏覽器安全色性
var elem = e.target || e.srcElement;
while (elem) { //迴圈判斷至跟節點，防止點擊的是div子項目
if (elem.id && elem.id=='test') {
return;
}
elem = elem.parentNode;
}

$('#test').css('display','none'); //點擊的不是div或其子項目
});
</script>

這樣當點擊頁面任何地方的時候都會層層冒泡至document的click事件，事件處理常式會判斷事件來源是否為id==test的div或其子項目，如果是方法return，否則隱藏該div，也能夠實現我們的需求。