Как исключить элемент страницы из запуска события размытия jQuery? - PullRequest
Новая
       10

Как исключить элемент страницы из запуска события размытия jQuery?

2 голосов
/ 03 апреля 2011

У меня есть <input>, который, если сфокусироваться на нем, показывает выпадающее меню.Когда что-то нажимается, предложения исчезают.Проблема в том, что я не могу придумать, как сделать так, чтобы при нажатии на подсказку <div> событие размытия не запускалось.

Вот часть 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();
     });

Ответы [ 2 ]

4 голосов
/ 03 апреля 2011

Попробуйте что-то вроде: 

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

ОБНОВЛЕНИЕ: (упс, приведенный выше код работает не так, как я думал)

Это должно работать: 

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

Демо: http://jsfiddle.net/PNVCL/

UPDATE2:

Я забыл, что вам все еще нужно размытие, потому что вы, вероятно, хотите скрыть div с предложением, когда переключаетесь на другой ввод, нажимая вкладку. Вот обновленная демка: http://jsfiddle.net/PNVCL/1/

Нажатие в любом месте по-прежнему закрывает предложенный div (кроме самого предложенного div или ввода), а также нажимает на вкладку для переключения на другой ввод. Все еще нуждается в улучшении, но вы сможете забрать отсюда.

1 голос
/ 03 апреля 2011

Вы не должны использовать событие размытия, потому что невозможно сделать различие между размытием, вызванным щелчком на поле подсказки, и другим размытием (вкладка, размытие окна, щелчок правой кнопкой мыши ...).

Обходной путь, предложенный @dakis, состоит в том, чтобы использовать событие щелчка на документе, но предложить окно, чтобы закрыть окно.Я предлагаю динамически добавлять и удалять обработчик щелчков документа, чтобы избежать накладных расходов и позволить пользователю щелкать по полю, не закрывая поле.

Демонстрация здесь: http://jsfiddle.net/fvwPn/

Кроме тогоЯ сделал коробку закрытой при нажатии клавиши TAB.Я также добавил грязную версию взлома (с комментариями), которая использует событие размытия и большой взлом с использованием тайм-аута (поскольку два события запускаются независимо, задержка зависит от клиентского браузера и скорости ... да, это грязный взлом).

...