如何從觸發jQuery模糊事件中排除頁面元素？

我有一個<input>，當它集中在它顯示一個建議下拉。當點擊其他任何東西時，建議消失。問題是，我似乎無法弄清楚，所以當點擊建議<div>時，blur事件不會運行。如何從觸發jQuery模糊事件中排除頁面元素？

下面有一些HTML的：

<label id="testTagsLabel">Tags:</label> 
<input type="text" name="tags" id="testTags" placeholder="Ex: Poem, Edgar Allen Poe"> 
<div id="tagSuggest"> 
<ul> 
<li class="tagSuggestTag">testtag</li> 
<li class="tagSuggestTag">testtag2</li> 
<li class="tagSuggestTag">testtag3</li> 
<li class="tagSuggestTag">testtag4</li> 
</ul> 
</div>

繼承人一些JavaScript代碼：

$('#testTags').focus(
    function(){ 
     $('#tagSuggest').show(); 
    }); 

    $('#testTags').blur(
    function(){ 
     $('#tagSuggest').hide(); 
    });

來源

2011-04-02 chromedude

請示例代碼 – Guidhouse 2011-04-02 22:49:23

@guidhouse剛添加它 – chromedude 2011-04-02 22:53:16

試着這麼做：

$("#yourinput").blur(function(e) { 
    if(!$(e.target).is(".suggestDiv")) { 
     // close the suggest div 
    } 
});

UPDATE：（哎呀，代碼以上不起作用，因爲我認爲它會）

這應該工作：

$(document).click(function(e) { 
    if (!$(e.target).is("#suggest")) { 
     $("#suggest").hide(); 
    } 
});

演示：http://jsfiddle.net/PNVCL/

UPDATE2：

我忘了，你仍然需要模糊，因爲你可能要當你切換到隱藏建議DIV另一個輸入是通過點擊標籤。這裏有一個更新的演示：http://jsfiddle.net/PNVCL/1/

點擊任何地方仍然關閉建議股利（除了建議div本身或輸入），以及擊中標籤切換到另一個輸入。仍然需要改進，但你應該能夠從這裏接。

來源

2011-04-02 22:51:14 Daniel

不起作用，因爲e.target始終是blur事件的輸入。 – Pierre 2011-04-02 23:02:26

哎呀，我頭腦中有正確的想法，但「措辭」錯了。更新答案以及演示 – Daniel 2011-04-02 23:10:09

當彈出窗口顯示/隱藏時，您應該綁定/解除綁定文檔事件偵聽器，並將輸入本身包含在排除中。 – Pierre 2011-04-02 23:20:17

您不應該使用模糊事件，因爲無法區分由建議框和其他模糊（選項卡，窗口模糊，右鍵單擊...）引起的模糊。

@dakis給出的解決方法是使用文檔上的單擊事件，但使用提示框關閉框。我建議動態添加和刪除文檔點擊處理程序以避免開銷，並允許用戶在不關閉框的情況下點擊該字段。

演示在這裏：http://jsfiddle.net/fvwPn/

另外我製成的箱體按下TAB時關閉。我還添加了一個骯髒的黑客版本（評論），它使用模糊事件和一個使用超時的大黑客攻擊（因爲這兩個事件是獨立開發的，延遲取決於客戶端瀏覽器和速度......只是這是一個骯髒的黑客攻擊）。

來源

2011-04-02 23:33:27 Pierre

我在我最近的jsFiddle修訂版中做了幾乎相同的事情:)投票支持你的努力和評論 – Daniel 2011-04-02 23:39:08

但是，爲什麼你認爲有必要動態添加/刪除文檔事件偵聽器？在我的例子中，當DOM準備就緒時，它只添加一次 – Daniel 2011-04-02 23:42:27

因爲每次用戶點擊文檔，即使該框未顯示，它也會嘗試隱藏（）它。想象一下頁面中的每個小部件都是一樣的，它可能會成爲一個大應用程序的問題。更糟糕的是，如果在另一個上下文中使用相同的方框，點擊會意外隱藏它。 – Pierre 2011-04-02 23:44:50

如何從觸發jQuery模糊事件中排除頁面元素？

回答

相關問題