2010-03-16 142 views
0

更新2:jquery focusin()和防止冒泡

我睡了,然後掀起了一些示例代碼,試圖進一步找出問題。

下面是使用螢火蟲的執行console.log給你看哪個對象是觸發focusIn事件樣本:

http://jsbin.com/axefo3/11

1)單擊第一個鏈接:黃格顯示 2)按下TAB鍵:它應該標籤到黃色div內的鏈接

它這樣做,但然後它會觸發focusin事件,並且出於某種原因,它似乎再次冒泡到紅色的div,然後被告知然後關閉黃色的div。

這是我已經告訴了黃股利不會傳播的focusIn事件後也:

$('#innerDiv').focusin(function(e){e.stopPropagation()}); 

我又試圖父DIV連接的focusIn事件後,才上的focusIn內股利。

http://jsbin.com/axefo3/16

會發生什麼有是tab鍵在內部div的,第一個鏈接並設置父DIV的focusIn事件。這很好!但是,然後在內部區域內的下一個鏈接中選中,再次關閉div。

所以,我想我仍然難倒了。看起來我無法停止注意力集中。思考?理論?

原帖如下...

============================

我展示一個通過onclick事件的div。如果你在div外單擊,我想隱藏它。要做到這一點,我在身體上結合一個時間點擊事件:

$('body').one('click.myDivPopup', function(e) { 
    ...close my div... 
}); 

在股利本身,我告訴它不會傳播事件,以便在專區內竟點擊不會觸發上點擊正文:

$myDiv.click(function(e){e.stopPropagation()}); 

如預期這工作得很好。

我也想隱藏div如果一個選項卡出div。

我的想法是,在那種情況下,我可以在正文中使用focusIn事件:

$('body').one('focusin.myDivPopup', function(e) { 
    ...close my div... 
}); 

同樣,我不希望事件,泡出來的股利本身的,所以添加了這個:

$myDiv.focusin(function(e){e.preventDefault()}); 

這是行不通的。更改myDiv中元素內的焦點將觸發主體中的focusin事件。

這可能是jQuery中的錯誤?如果是的話,是否有更好的方法來完成這個?

UPDATE:

這個問題似乎是,似乎沒有辦法確定DIV已失去焦點,因爲它永遠不會具有焦點。我的解決方案的邏輯是看看ELSE是否有注意力集中在div之外(因此使用focusin),但是我遇到了div中事件的焦點問題,通過觸發它在身體上看似冒泡。

現在,我認爲我的解決方案必須在彈出窗口中添加一個CLOSE元素,然後讓人們明確地觸發它。雖然不理想,特別是鍵盤導航。

+0

最終解決方案是什麼(如果有的話)? – 2013-07-29 09:53:59

+0

@MykaEyl這是前一陣子。 :)我相信最終的解決方案是設計決策,以確保彈出窗口具有「關閉」鏈接,該鏈接可以被選中並激活以關閉DIV。鼠標用戶仍然可以點擊div外的任何地方,但鍵盤用戶必須明確選擇關閉div。 – 2013-07-29 12:15:11

回答

0

顯示2個div不會更容易嗎?一個透明的(不可見的)div覆蓋整個頁面,另一個則是你真正想要展示的。那麼你只需要設置z-index正確的內容<隱藏內容< contentdiv。

然後爲不可見div註冊點擊事件,點擊時刪除兩者。成品。至少大多數人是這樣的模態對話框的jQuery插件工作,我猜

演示http://jsbin.com/uzoyo/3

+0

不知道它是否更容易,但它是一個選項。不知道div是否可以關注。 – 2010-03-16 22:09:46

+0

適用於點擊,但不能退出。在你的例子中,顯示div,然後點擊文本(使焦點位於div內),然後點擊TAB以跳出div。我需要div在兩種情況下消失(單擊其他位置或從div中退出)。目標是容納鍵盤導航。 – 2010-03-16 22:23:21

+0

新演示http://jsbin.com/uzoyo/3 – jitter 2010-03-16 22:43:04

0

如果你想使用的focusIn而不是利用事件冒泡,你爲什麼不只是使用focus ...?