2012-06-22 219 views
2

我堅持了幾個小時。我需要創建一個表單的一部分,如果你點擊一個選擇,一個複選框字段應該彈出,如果你再次點擊其他任何地方,這個字段應該消失。我希望在點擊選擇後重點關注該字段,但由於某種原因,我的複選框字段不僅在您點擊其他任何地方時失去了焦點,即使您點擊了INSIDE複選框的標籤的。所以問題在於,我正在關注一個元素,在該元素中,我點擊了一個標籤,並且出於某種原因,我無法弄清楚重點的父元素失去了焦點。模糊事件在焦點元素的子元素被點擊時觸發焦點父元素

代碼:http://jsfiddle.net/RELuL/2/

任何幫助讚賞!

P.S:

只是一些獎金問題:)正如你所看到的,如果你點擊選擇輸入時,顯示我的隱藏複選框部分有點晚了,它不會立即顯示看起來有點糟糕。任何提示如何優化這個?

編輯:我使用的是Firefox 13.0.1

+0

你現在可以檢查它! –

+0

對不起,檢查什麼? – skywlkr

+0

所以這是一個選擇或複選框,你爲什麼改變它? – jasssonpet

回答

4

當您單擊<label>時,瀏覽器會關注關聯的輸入字段。所以焦點離開父母並進入複選框(並且調用你的blur事件處理程序)。

而不是集中父DIV依靠它就被模糊的,附加一個單擊處理文檔:

$(document).click(function() { 
    multiSelectUpdate(); 
}); 

$('.multiselect.container').click(function(event) { 
    event.stopPropagation(); // prevent click event from reaching document 
}); 

此外,在Webkit的點擊上<select>不會觸發click事件。解決方法是使用焦點事件。

Demo

+0

這是最好的解決方案,到目前爲止,但我已經在我已經打開了選擇框,關閉它後,我拆散從文檔中點擊收聽之後,我只綁定點擊偵聽文件的方式升級,所以它不會運行multiSelectUpdate()函數,每次我點擊頁面上的某個地方。謝謝,賞金獎勵正在進行中! – skywlkr

0

好了兩個簡單的變化得到了這個工作首先更改點擊監聽的選擇框爲mousedown監聽器,如下。

$('.multiselector').mousedown(function(event) { 
     event.preventDefault(); 
     currentMulti = $(this).attr('id'); 
     thisOffset = $(this).offset(); 
     $(this).hide(); 
     $('#' + currentMulti + '-container') 
      .css('top', thisOffset.top + 'px').show().attr("tabindex", -1).focus(); 
     $(this).addClass('active'); 
    }); 

這個觸發器在盒子能夠出現之前就不會顯示。

其次,模糊監聽者認爲它失去了焦點,當一個孩子得到了焦點,以解決這個變化focusout

$('.multiselect.container').focusout(function() { 
     multiSelectUpdate(); 
    }); 

這隻有當選擇器失去焦點時纔會觸發,即使當前焦點在選擇器的子節點上。

修正了fiddle

享受:)

編輯

出於某種原因,模糊觸發FF上多次所以這一輪使用,而不是模糊的鼠標離開工作。

$('.multiselect.container').mouseleave(function() { 
     multiSelectUpdate(); 
    }); 
+0

我願意接受它作爲一個答案,但你可以看到,您的解決方案不工作完美,因爲如果我點擊框外,容器犯規失去重心,不會觸發事件的內容事件。 – skywlkr

+0

哦哎呀那是錯誤的版本1秒 – AbstractChaos

+0

現在@skywlkr嘗試似乎我說好的更新的笑,它只是火撥弄說好的得到了事件的內容實施 – AbstractChaos