jQuery остановка события пузыря на основе метода размытия ввода?

Question

У меня проблема с jQuery и надеюсь на вашу помощь. Я долго искал решение, но ничего не придумал.

У меня есть поле ввода, и когда я нажимаю (фокусируется) на нем, в DOM появляется некоторый div с определенным идентификатором, а когда я нажимаю в другом месте (размытие), этот div скрывается.

Что мне нужно сделать, это когда я нажимаю на этот конкретный div, чтобы он оставался видимым и не скрывал.

Так как я могу это сделать?

Спасибо и извините за мой плохой английский.

$(function(){ 

    $('input').focus(function() { 
     $('#visible-block').show(); 
    }); 

    $('input').blur(function() { 
     $('#visible-block').hide(); 
    }); 

}); 

У меня есть небольшой демо для этого: http://jsfiddle.net/uJ8nW/

Answer 1

Просто проверьте если ваш наведете DIV при потере фокуса на вашем входе до сокрытия его:

$('input').blur(function() { 
    if(!$('#visible-block').is(":hover")) 
     $('#visible-block').hide(); 
}); 

jsfiddle

Редактировать: После прочтения комментариев, вот новое решение без необходимости размытия:

$(function(){ 

    $('input').focus(function() { 
     $('#visible-block').show(); 
    }); 

    $('#visible-block').blur(function() { 
     $('#visible-block').hide(); 
    }); 

    $('html').click(function() { 
     //Hide the menus if visible 
     $('#visible-block').hide(); 
    }); 

    $('input').click(function(event){ 
     event.stopPropagation(); 
    }); 

    $('#visible-block').click(function(event){ 
     event.stopPropagation(); 
    }); 

}); 

Вот обновление jsfiddle

Answer 2

Может быть, не самое лучшее решение, но может соответствовать вашим потребностям.

$(function(){ 

$('input').focus(function() { 
    $('#visible-block').show(); 
}); 

$('input').blur(function() { 
    if (!$('#visible-block').is(":hover")) 
     $('#visible-block').hide(); 
}); 

$('#wrapper').click(function() { 
    if (!$('#visible-block').is(":hover") && !$('input').is(":hover")) 
     $('#visible-block').hide(); 
}); 
});