操作上模糊除非特定的元素與jQuery

點擊

$('#myInput') // an input field for search 
$('#myList') // a list to display search results

我想隱藏列表當輸入不再具有焦點，就像這樣：

$('#myInput').blur(function() { 
    $('#myList').hide(); 
});

這樣做效果很好，除非單擊列表項時，因爲模糊事件在註冊點擊之前觸發並隱藏列表。目標是讓列表在單擊列表的任何部分時保持可見，即使這會導致輸入模糊。

我該怎麼做？謝謝！

來源

2011-02-04 Justin Stayton

您可以通過保持一個全局變量做到這一點，並setTimouts，以等待200ms的延遲，然後檢查2個元素中的哪一個具有焦點。

var keepFocus = false; 

function hideList(){ 
    if(!keepFocus){ 
     $('#myList').hide(); 
    } 
} 

$('#myInput').blur(function() { 
    keepFocus = false; 
    window.setTimeout(hideList, 200); 
}).focus(function(){ 
    keepFocus = true; 
}); 


$('#myList').blur(function() { 
    keepFocus = false; 
    window.setTimeout(hideList, 200); 
}).focus(function(){ 
    keepFocus = true; 
});

來源

2011-02-04 19:10:24

模糊和焦點似乎不適用於#myList，因爲它不是輸入。 – 2011-02-04 21:58:12

@Justin，這是什麼？嘗試刪除列表中的`focus`方法，並將`blur`代碼放入您的列表中`click`事件 – 2011-02-04 22:08:10

這只是一個div。我已經調整了您的代碼以使用我的設置，所以謝謝！ – 2011-02-07 21:37:44

你需要能夠說「做這個模糊（）除非列出的收益集中在同一時間」。

這個問題說，如何檢測一個元素是否具有焦點：Using jQuery to test if an input has focus

然後，所有你需要做的是：

$("#myInput").blur(function() { 
    if (!$("#myList").is(":focus")) { 
     $("#myList").hide(); 
    } 
});

來源

2011-02-04 19:09:47

似乎並沒有工作。 document.activeElement將body標籤顯示爲「focused」元素。我猜這是行不通的，因爲「聚焦」的想法固有地與輸入字段相關聯。 – 2011-02-04 19:32:58

要做到這一點，最好的辦法是將事件處理程序附加到body元素，然後另一個處理程序的列表停止事件傳播：

$(body).click(function() { 
    $("#myList").hide(); 
}); 

$("#myList").click(function (e) { 
    e.stopImmediatePropagation(); 
});

這偵聽click＃的外myInput並隱藏#myList。同時，第二個函數偵聽對#myList的點擊，如果它發生，它會阻止hide（）發射。

來源

2011-04-06 02:56:52 Adam

我面臨着完全相同的問題，所以這是我如何解決它。

，我想出了一個事實，即比click()早期blur()火災。

所以我試圖將click()更改爲mousedown()，發現mousedown()在blur()之前發生火災。

而且模仿click()你不得不解僱mousedown()然後mouseup()

所以你的情況我會做這樣的事情：

var click_in_process = false; // global 

$('#myList').mousedown(function() { 
    click_in_process = true; 
}); 

$('#myList').mouseup(function() { 
    click_in_process = false; 
    $('#myInput').focus(); 

    // a code of $('#myList') clicking event 

}); 

$('#myInput').blur(function() { 
    if(!click_in_process) { 
     $('#myList').hide(); 

     // a code of what you want to happen after you really left $('#myInput') 

    } 
});

演示/例子：http://jsfiddle.net/bbrh4/

希望它有助於！

來源

2013-09-18 13:34:09

操作上模糊除非特定的元素與jQuery

回答

相關問題