jquery - jQuery在输入模糊方法上停止事件冒泡？

Question

我在使用 jQuery 时遇到问题，希望得到您的帮助。我一直在寻找解决方案很长时间，但一无所获。

我有一个输入字段，当我单击（聚焦）它时，DOM 中会出现一些具有特定 ID 的 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();
}); 
});