div失去焦点时如何隐藏它？答案

【问题标题】：How do I hide a div when it loses its focus?div失去焦点时如何隐藏它？
【发布时间】：2011-07-07 03:06:44
【问题描述】：

基本上，我正在尝试实现一个登录，例如新推特的登录。当您单击登录时，会弹出一个带有字段的 div。现在，当我单击 div 之外的任何位置（div 失去焦点）时，div 应该消失。

我已经尝试过How to blur the div element?中提到的技术

代码如下

$("body").click(function(evt) {

            if (evt.target.id !== 'loginDialog') {
                $("#loginDialog").hide();
            }
        });

问题在于即使我在子 div 中单击带有 loginDialog 的某个位置，target.id 也不等于 loginDialog。

所以上面是一个很好的前进方向，但解决方案是不完整的。

实现这一目标的最佳方法是什么？

【问题讨论】：

我有预感需要一些事件冒泡处理代码，但之前从未这样做过

标签： jquery javascript-events

【解决方案1】：

如果将鼠标移到外面还不够，并且您希望它仅在用户在其外部单击时才消失，那么这里有一个 sn-p 可能会对您有所帮助。

$('body').click(function(evt) {
    if($(evt.target).parents('#loginDialog').length==0) {
        $('#loginDialog').hide();
    }
});

【讨论】：

好的，方法是正确的，但我做了一些调整。我使用 $(evt.target) 而不是 $(this) 因为 $(this) 总是被 body 引用，所以它的父级是 html。我使用的比较也是 .length !=0 并在 else 条件下隐藏登录对话框。
你说得对，我没有想通。对不起。我为后续访问者修复它。

【解决方案2】：

在各种示例

中更好地为 iframe http://fancybox.net/ 使用 jquery fancybox 插件

[更新]::抱歉愚蠢的假设代码。检查工作代码

<script type="text/javascript">
    $(function (){
        $(document).click(
            function (e){
                var blur = $('#blur');
                var position = $(blur).position();
                var height = $(blur).height();
                var width = $(blur).width();

                if((e.clientX > position.left && e.clientX < position.left + width) && 
                    (e.clientY > position.top && e.clientY < position.left + height)
                ){
                    alert(e.clientX+' '+e.clientY);

                }
                else{       
                    /*Hide the div*/                    
                        $('#blur').hide();
                    /*Hide the div*/

                }


            }
        )
    })
</script>
<div id="blur">Blur me</div>

【讨论】：

没有为 div 触发模糊事件，因此无法正常工作。
这也是一个很好的方法，但是pesaa 的代码只是几行代码，所以我让它成为答案。不过，我赞成你的回答！

【解决方案3】：

不是一个很好的做法，但可能会起作用......

$('body').click(function(){
     $('#loginDialog').hide();     

});
$('#loginDialog').click(function(evt){
    evt.stopPropagation();
});

【讨论】：