如何檢查焦點是否已經切換到另一個使用jQuery模糊後的新元素？

我的頁面上有一個文本輸入。當它收到焦點時，會在其下方顯示一個選擇框。當它失去焦點時，我希望選擇框消失，除非焦點已轉移到選擇框。聽起來很簡單，但我遇到了一個問題。如何檢查焦點是否已經切換到另一個使用jQuery模糊後的新元素？

我成立了事件處理程序，像這樣（使用的CoffeeScript）

jQuery -> 
    $('td.description input').focus -> showItemSelector() 
    $('td.description input').blur -> hideItemSelector()

showItemSelector()和hideItemSelector()的定義，像這樣

showItemSelector() -> 
    $('#item-selector').show() 

hideItemSelector() -> 
    unless $('#item-selector select').is(':focus') 
    $('#item-selector').hide()

但它不工作。在輸入失去焦點後，項目選擇器始終處於隱藏狀態。我做了一些試驗，我的懷疑得到了證實。 hideItemSelector函數在將焦點移動到新元素之前正在執行（這是有道理的 - 在將焦點分配給下一個元素之前，瀏覽器可能會從第一個元素獲取焦點，觸發我的函數）。以下一段代碼演示了這一點;

hideItemSelector =() -> 
    focus = -> console.log $('select#category').is(':focus') 
    focus() 
    setTimeout focus, 1000

這個返回false，然後在控制檯如此。延遲使瀏覽器有時間轉移焦點。

所以我的問題是，我怎麼做我想做的事情，而不使用setTimeout？如果沒有其他工作，那麼這將不得不做，但它似乎是一個有缺陷的方法。

來源

2012-08-25 brad

我不會真的叫'setTimeout'是一個有缺陷的方法。有時使用它是不可避免的。 –

您可以指定全局變量和改變從true其值設置爲false作爲和關閉對象的用戶動作，例如實現這一目標：

$('#yourElement').mouseenter(function() { 
    isHovered = true; 
}).mouseleave(function() { 
    isHovered = false; 
});

還有，在所有瀏覽器的工作方式除了IE，但我不建議，因爲它是使用無效的僞選擇使用它：

if ($('#hello').is(':hover')) { 
     alert('hello'); 
}

除此之外你將不得不找到該插件。這裏是SpYk3HH自制的插件，可以在這裏找到：jsFiddle isHover Plugin Demo。我還建議閱讀：How do I check if the mouse is over an element in jQuery?。我認爲這對你有用。

來源

2012-08-25 11:12:04

如何檢查焦點是否已經切換到另一個使用jQuery模糊後的新元素？

回答

相關問題