（爲什麼）訪問outerHeight是否取消click/mouseup/focus事件？

Question

我遇到了一個奇怪的問題 - 訪問任何DOM元素的outerHeight，或者只是在模糊事件中將該元素登錄到瀏覽器的控制檯似乎取消導致模糊的點擊事件 - 當滿足一些特殊條件時。

這裏就是我想要做的事：

1. 有2個輸入，第一最初可見時，其他隱藏
2. 第一送入接收焦點，第二個輸入將顯示
3. 當第二輸入端接收焦點，它保持顯示
4. 如果輸入失去焦點，其中沒有被聚焦時，第二輸入將被隱藏

但是，似乎只是在我的blur事件處理程序中嘗試執行類似$('body')[0].outerHeight的操作時，第二個輸入從不會接收到單擊或焦點。由於它是太簡單地寫下來，下面就來的jsfiddle鏈接演示問題：http://jsfiddle.net/7K2Ha/3/

注 - 這恰好與普通的JS相同

任何人能解釋爲什麼發生這種情況並沒有解決這個辦法？

Answer 1

首先，您將焦點/模糊事件綁定到全部 .jq輸入。然後添加下一個事件處理程序（這意味着，它們都將被執行 - 包括第一個，這將刪除has-focus類）。

檢查此小提琴第20行：fiddle here。

$('#input3').unbind('blur').on('blur', //... 

Answer 2

的問題是不特定於offsetHeight，我相信，如果你註釋掉該行僅僅是因爲瀏覽器將不要求性能/優化的原因一個空的功能塊，你沒有得到的效果。

它似乎歸結爲事件的執行順序（尤其是當同一類型的多個jquery事件連接起來時，會出現問題）。 查看當你連線blur/mouseover /等時會發生什麼。所有$('input.jq')元素在最後都有共同點的事件：http://jsfiddle.net/7K2Ha/6/

我所做的只是將最頂端的javascript塊移到底部，並突然生效。在這種情況下，focus事件似乎發生在blur事件之前。注意focus永遠不會被調用。

$('input.jq') 
.on('focus', function() { 
    // get focus'ed elements parent 
    var thisParent = $(this).parent('div') 
    thisParent.addClass('has-focus'); 

    // get all other parents 
    var otherParents = $('input.jq').parent('div').not(thisParent); 
    otherParents.removeClass('has-focus'); 
}) 

見updated JSfiddle：

作爲一個更強大的解決方案，我只用一個事件涵蓋了工作。