iT邦幫忙

0

選取其他部份時,隱藏某個div

點選按鈕show的時候,會開啟或關閉div popup,我想要像某些日曆一樣,點選網頁其他部份時,div會隱藏,也就是blur時隱藏,請問該怎麼寫

PS:要避免點選自己的內容跟按鈕show的時候隱藏div

[html]

....
.....
<input type="button" id="show" value="show">
<div id="popup" style="display: none;">
....
..
</div>
....


[JavaScript]
<script>
$('#show').click(function(){
$('#popup').toggle();
});

</script> 

2 個回答

18
wordsmith
iT邦高手 1 級 ‧ 2009-08-13 15:55:58
最佳解答

我說一下大概的想法,你再依據實際的需求去作修正

簡單的說,當你 $('#popup').show() 時,你可以在body綁定一個click事件,點擊後 $('#popup').hide()。
例如:

<pre class="c" name="code">
var hidePopup = function(){
  $('#popup').hide();     
}
$('#popup').show(function(){
   $('body').bind('click',hidePopup);
})
$('#popup').hide(function(){
   $('body').unbind('click',hidePopup);
})

但是這種寫法,會讓點擊在$('#popup')的div時,一樣會消失,如果上面有link之類的,就永遠點不到。
所以可以再加上一個當游標移過去時,暫時解除掉body的click事件,等hoverout時,再加回去。

<pre class="c" name="code">
$('#popup').hover(function(){
     $('body').unbind('click',hidePopup);
},function(){
     $('body').bind('click',hidePopup);
})
14
fillano
iT邦超人 1 級 ‧ 2009-08-13 22:41:20

我是覺得可以讓事件不要繼續傳遞下去就可以解決。例如:

<pre class="c" name="code">
<script>
$(document).ready(function(){
	$('#popup').hide();
	$('#show').click(function(e){
		$('#popup').show();
		e.stopPropagation();
		e.preventDefault();
	});
	$(document).click(function(){
		$('#popup').hide();
	});
	$('#popup').click(function(e){
		e.stopPropagation();
		e.preventDefault();
		return false;
	});
});
</script>

方法很多種啦...

(我在ff3.5, ie7, chrome, safari4上面測試過)

看更多先前的回應...收起先前的回應...
wordsmith iT邦高手 1 級 ‧ 2009-08-13 23:50:48 檢舉

讚! stopPropagation()和preventDefault()這個JS的"太祖長拳"才是正規的作法,學到了。

chan15 iT邦新手 5 級 ‧ 2009-08-14 01:21:07 檢舉

學js這麼久都沒看過stopPropagation()的相關資訊耶
這類資訊是屬於js的什麼項目?

fillano iT邦超人 1 級 ‧ 2009-08-14 09:41:18 檢舉

ㄝ,第一個參考資訊是DOM3 Event 標準文件:
http://www.w3.org/TR/2003/NOTE-DOM-Level-3-Events-20031107/events.html#Events-Event

第二個可能要仔細看,在msdn網站上:
http://msdn.microsoft.com/en-us/library/system.windows.browser.htmleventargs.preventdefault%28VS.95%29.aspx
以及
http://msdn.microsoft.com/en-us/library/system.windows.browser.htmleventargs.stoppropagation%28VS.95%29.aspx
底下的Remarks有提到,在IE中相對應的做法,其實是event.returnValue=false以及event.cancelBubble=true,不過既然在Silverlight文件中這樣提到,我想也許MS也要開始支援(或是已經支援)

第三個參考是mozilla網站:
https://developer.mozilla.org/en/DOM/event#Methods

其他家瀏覽器應該都會實作標準的DOM Event,其實這部份目前是IE比較不合標準,不過應該也已經朝著標準前進。

fillano iT邦超人 1 級 ‧ 2009-08-14 10:02:47 檢舉

補充一下學習JavaScript要注意的事情,就是如果從「標準」上來看,我們日常在用的JS可以分成兩個部份,語言本身與host環境,語言本身的標準目前是ECMA-262 Edition 3,如果是在網頁瀏覽器這個host環境中使用,相關的標準就是DOM。

其實javascript還有很多應用,並不只是在瀏覽器中啦。如果你有在windows環境中編譯過php,他設定用的script就是用jscript;另外像是Apache Cocoon或是Spring Webflow,我記得也是用javascript做流程的script語言等等。極端一點的話,VBA也可以用JScript來跑...我十年前做過一個案子,是用內嵌在軟體裡面的IE,透過網頁裡面的JScript+FSO,配合VBA呼叫Word來出考卷...

我要發表回答

立即登入回答