快捷導(dǎo)航

點(diǎn)擊頁面其它地方隱藏該div的兩種思路

更新時(shí)間：2013年11月18日 16:39:57 作者：

在本文為大家介紹兩種思路實(shí)現(xiàn)點(diǎn)擊頁面其它地方隱藏該div，第一種是對(duì)document的click事件綁定事件處理程序..詳情請(qǐng)參考本文

思路一

第一種思路分兩步

第一步：對(duì)document的click事件綁定事件處理程序，使其隱藏該div

第二步：對(duì)div的click事件綁定事件處理程序，阻止事件冒泡，防止其冒泡到document，而調(diào)用document的onclick方法隱藏了該div。

復(fù)制代碼代碼如下:

 
<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> 

這樣當(dāng)點(diǎn)擊頁面非div區(qū)域的時(shí)候，直接或?qū)訉用芭輹?huì)調(diào)用document的onclick方法，隱藏該div，而點(diǎn)擊div或其子元素的時(shí)候，事件總會(huì)冒泡的div本身，這時(shí)候會(huì)阻止事件繼續(xù)冒泡，不會(huì)調(diào)用doument的onclick方法致使div被隱藏，從而完成了我們的需求。

思路二

我們之前提到，在觸發(fā)DOM上的某個(gè)事件的時(shí)候會(huì)產(chǎn)生一個(gè)事件對(duì)象event，這個(gè)對(duì)象包含著所有與事件有關(guān)的信息，包括產(chǎn)生事件的元素、事件類型等相關(guān)信息，思路一中div的click事件處理程序傳入的參數(shù)就是這個(gè)event對(duì)象。訪問IE中的event對(duì)象有幾種不同的方式，取決于指定事件處理程序的方法。直接為DOM元素添加事件處理程序時(shí)，event對(duì)象作為window對(duì)象的一個(gè)屬性存在。

event對(duì)象包含了一個(gè)重要屬性：target(W3C)/srcElement(IE)，這個(gè)屬性標(biāo)識(shí)了觸發(fā)事件的原始元素，思路二就是要利用這個(gè)屬性。我們可以直接對(duì)document的click事件綁定事件處理程序，在事件處理程序中判讀事件源是否為id==test的div元素或其子元素，如果是則方法return不做操作，如果不是則隱藏該div。

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
$(document).bind('click',function(e){ 
var e = e || window.event; //瀏覽器兼容性 
var elem = e.target || e.srcElement; 
while (elem) { //循環(huán)判斷至跟節(jié)點(diǎn)，防止點(diǎn)擊的是div子元素 
if (elem.id && elem.id=='test') { 
return; 
} 
elem = elem.parentNode; 
} 

$('#test').css('display','none'); //點(diǎn)擊的不是div或其子元素 
}); 
</script> 

這樣當(dāng)點(diǎn)擊頁面任何地方的時(shí)候都會(huì)層層冒泡至document的click事件，事件處理程序會(huì)判斷事件源是否為id==test的div或其子元素，如果是方法return，否則隱藏該div，也能夠?qū)崿F(xiàn)我們的需求。

您可能感興趣的文章: