點擊任何位置隱藏所需隱藏的元素 (無BUG/jQuery版)
阿新 • • 發佈:2018-03-28
tno blog onclick ava target tex post 利用 log
1>第一種分兩步
1) :對document的click事件綁定事件處理程序,使其隱藏該div
2) :對div的click事件綁定事件處理程序,阻止事件冒泡,防止其冒泡到document,而調用document的onclick方法隱藏了該div。
1 <script type="text/javascript"> 2 function stopPropagation(e) { 3 if (e.stopPropagation) 4 e.stopPropagation(); 5 else 6 e.cancelBubble = true; 7 } 8 9 $(document).bind(‘click‘,function(){ 10 $(‘#test‘).css(‘display‘,‘none‘); 11 }); 12 13 $(‘#test‘).bind(‘click‘,function(e){ 14 stopPropagation(e); 15 }); 16 </script>
這樣當點擊頁面非div區域的時候,直接或層層冒泡會調用document的onclick方法,隱藏該div,而點擊div或其子元素的時候,
事件總會冒泡的div本身,這時候會阻止事件繼續冒泡,不會調用doument的onclick方法致使div被隱藏,從而完成了我們的需求。
2>第二種
我們之前提到,在觸發DOM上的某個事件的時候會產生一個事件對象event,這個對象包含著所有與事件有關的信息,包括產生事件的元素、事件類型等相關信息,思路一中div的click事件處理程序傳入的參數就是這個event對象。訪問IE中的event對象有幾種不同的方式,取決於指定事件處理程序的方法。直接為DOM元素添加事件處理程序時,event對象作為window對象的一個屬性存在。
event對象包含了一個重要屬性:target(W3C)/srcElement(IE),這個屬性標識了觸發事件的原始元素,思路二就是要利用這個屬性。我們可以直接對document的click事件綁定事件處理程序,在事件處理程序中判讀事件源是否為id==test的div元素或其子元素,如果是則方法return不做操作,如果不是則隱藏該div。
1 <script type="text/javascript"> 2 $(document).bind(‘click‘,function(e){ 3 var e = e || window.event; //瀏覽器兼容性 4 var elem = e.target || e.srcElement; 5 while (elem) { //循環判斷至跟節點,防止點擊的是div子元素 6 if (elem.id && elem.id==‘test‘) { 7 return; 8 } 9 elem = elem.parentNode; 10 } 12 $(‘#test‘).css(‘display‘,‘none‘); //點擊的不是div或其子元素 13 }); 14 </script>
這樣當點擊頁面任何地方的時候都會層層冒泡至document的click事件,事件處理程序會判斷事件源是否為id==test的div或其子元素,
如果是方法return,否則隱藏該div,也能夠實現我們的需求。
點擊任何位置隱藏所需隱藏的元素 (無BUG/jQuery版)