[問題] 點擊目標div以外處時，隱藏該div

看板Ajax作者時間14年前 (2011/12/20 16:31), 編輯推噓5(5推 0噓 22→)
留言27則, 4人參與, 最新討論串1/1
請教各位先進 小弟目前設計出一個彈跳視窗(div)，其中包含多個核選方塊(checkbox)。 想要讓使用者，點擊彈跳視窗以外範圍時，自動隱藏該視窗 目前想到的方式是： div綁住一個blur()事件，的確 點擊其它處時會隱藏… 但一點選div內的物件(checkbox)，也會隱藏div 不知這段要如何改寫？ -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 140.125.235.184
→
12/20 16:38, , 1F
window 掛一個點擊事件，點擊時檢查是否在div內..
12/20 16:38, 1F
推
12/20 17:27, , 2F
印象中jquery有個plugin新增一堆outside event
12/20 17:27, 2F
→
12/20 18:21, , 3F
div 掛 click function，然後所有 div hide()。
12/20 18:21, 3F
→
12/20 18:21, , 4F
this.show() 或是你可以取得目前 div id 用不等於id去hide
12/20 18:21, 4F
推
12/20 20:57, , 5F
哇靠...樓上這工程也太大了吧? div多一點豈不是會lag..
12/20 20:57, 5F
→
12/20 20:59, , 6F
照一樓講去做就對了...
12/20 20:59, 6F
推
12/20 21:05, , 7F
var $div=$('#div');$('body').click(function(e){
12/20 21:05, 7F
→
12/20 21:05, , 8F
if ($(e.target).parents('#div').length<1){
12/20 21:05, 8F
→
12/20 21:06, , 9F
$div.hide();
12/20 21:06, 9F
→
12/20 21:06, , 10F
}
12/20 21:06, 10F
→
12/20 21:06, , 11F
});
12/20 21:06, 11F
→
12/20 21:06, , 12F
以上是假設該div id為div的寫法
12/20 21:06, 12F
推
12/20 21:10, , 13F
啊　parents會不包括自身....
12/20 21:10, 13F
推
12/20 21:20, , 14F
if裡面要加&& $(e.target).attr('id')!='div'
12/20 21:20, 14F
→
12/20 21:20, , 15F
不過這還滿笨的　更聰明的寫法找別人吧....
12/20 21:20, 15F
→
12/20 21:53, , 16F
12/20 21:53, 16F
→
12/20 21:53, , 17F
我原本看成是點擊 div 消掉其他 div :( 不過看起來，
12/20 21:53, 17F
→
12/20 21:54, , 18F
原PO只是想做 lightbox/colorbox 的效果罷了…
12/20 21:54, 18F
→
12/20 21:54, , 19F
至於會有 100 個 div 只是想測試一下很多 div 到底多慢
12/20 21:54, 19F
→
12/20 21:55, , 20F
可以開 firefox/chrome 看 console log 裡面有記
12/20 21:55, 20F
→
12/20 21:55, , 21F
timestamp。
12/20 21:55, 21F
→
12/20 22:00, , 22F
另外 IE 如果有問題的話是正常的，我記得 ie9 之前都沒有
12/20 22:00, 22F
→
12/20 22:00, , 23F
console.log 所以會報炸。我對 IE 很不友善的 XDD
12/20 22:00, 23F
→
12/21 09:24, , 24F
謝謝各位的回答，原來還有outside的plugin
12/21 09:24, 24F
→
12/21 09:27, , 25F
我都忘了還可以用$('body')可以用，這方法夠了
12/21 09:27, 25F
→
12/21 09:29, , 26F
IE 我也很少用…但IE的市佔率高，故不得不配合它
12/21 09:29, 26F
→
12/21 10:02, , 27F
是說，拿掉 console.log 那段的話，理論上IE也能動
12/21 10:02, 27F
‣ 更多 fr730149 的文章
文章代碼(AID): #1Ey4VY1X (Ajax)