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

【问题标题】：jQuery stop event bubbling on input blur method?jQuery在输入模糊方法上停止事件冒泡？
【发布时间】：2013-07-12 14:05:44
【问题描述】：

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

我有一个输入字段，当我单击（聚焦）它时，DOM 中会出现一些具有特定 ID 的 div，当我单击其他位置（模糊）时，该 div 会隐藏。

我需要做的是，当我点击那个特定的 div 时，让它保持可见而不是隐藏。

那我该怎么做呢？

谢谢你，对不起我的英语不好。

$(function(){

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

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

});

我有一个小演示：http://jsfiddle.net/uJ8nW/

【问题讨论】：

简单的解决方法：jsfiddle.net/uJ8nW/6
可能重复：stackoverflow.com/questions/11173509/…

标签： jquery events input event-bubbling stoppropagation

【解决方案1】：

在隐藏输入之前，只需检查您是否将焦点悬停在 div 上：

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

jsfiddle

编辑：看完cmets，这里是不需要模糊功能的新解决方案：

$(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

【讨论】：

如果用户单击 div 然后单击其他地方，这将不起作用
对，假设绿色框是某种下拉菜单，您还需要一个 blur 处理绿色框。
这不是问题的一部分，但我已经编辑了我的答案以满足您的需求，@zozo 答案也不错

【解决方案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();
}); 
});

【讨论】：