Javascript 通过单击“外部”关闭div

我想通过单击某个div中的关闭链接来隐藏该div，或通过单击该div之外的任何位置来隐藏该div

我正在尝试下面的代码，它通过正确地单击close链接打开和关闭div，但是如果我在通过单击div之外的任何位置来关闭它时遇到问题

$（“.link”）。单击（函数（）{
$（“.popup”）.fadeIn（300）；
}
);
$（'.close'）。单击（函数（）{
$（“.popup”）.fadeOut（300）；
}
);
$（'body'）。单击（函数（）{
如果（！$（this.target）.is（'.popup'））{
$（“.popup”）.hide（）；
}
}
);

你好，世界
您需要

$('body').click(function(e) {
    if (!$(e.target).closest('.popup').length){
        $(".popup").hide();
    }
});

我建议使用修改后的fiddle中所示的stopPropagation（）方法：


这样，您可以在单击主体时隐藏弹出窗口，而无需添加额外的if，并且当您单击弹出窗口时，事件不会通过弹出窗口冒泡到主体上。
另一种方式可以减少JSFIDLE的错误（需要双击打开）

$(".transparent-back").on('click',function(){
    $('popup').fadeOut(300);
});

这不会将任何委托事件用于主体级别

将
tabindex=“-1”
设置为DIV.popup（对于样式CSS
大纲：0
）


你最好这样做。只需为要隐藏的div提供一个id，并生成这样的函数。
通过在主体上添加onclick事件来调用此函数

function myFunction(event) { 

if(event.target.id!="target_id")
{ 
    document.getElementById("target_id").style.display="none";
  }
}

这个问题可能已经得到了回答。正如Philip Walton在中所解释的，当事件传播被中断时，可能会出现一些潜在的问题

更好的方法/解决方案是创建自定义jQuery事件，例如clickoutside。Ben Alman有一篇很好的文章（）解释了如何实现一个（也解释了特殊事件是如何工作的），他有一个很好的实现（）

更多关于jQuery事件API和jQuery特殊事件的阅读：




在弹出div之前添加一个占据整个窗口大小的透明背景

.transparent-back{
    position: fixed;
    top: 0px;
    left:0px;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.5);
}

然后单击，关闭弹出窗口

$(".transparent-back").on('click',function(){
    $('popup').fadeOut(300);
});

可能的副本：event.target而不是this.target。或者，如果您不想使用委派事件，您可以使用div的焦点事件。如果您使用的是jQuery UI或引导，我建议您查看
.Modal（）
组件，它是一个可以使用并实现您想要的行为的魅力。@TusharGupta您已经在回答中发布了它。你的小提琴对我根本不起作用你不应该使用jQuery2.x。正如开发人员自己承认的那样，JQuery的最佳稳定版本是1.9.1。坚持使用1.9.1以确保它不是某个JQuery函数出现故障。您的小提琴似乎有很多问题。在绿色块出现之前，我不得不垃圾邮件点击打开的链接几次，即使在那之后我也很难关闭它。是的，但原来的小提琴也是如此，我只是担心事件的传播thing@JonasGrumann谢谢，是的，如果我添加最后一个函数，原始版本就有这个问题。这就是为什么我发布了这个问题，因为我在单击.popup之外的任何位置后都无法关闭它。这很好，但是如果我有多个弹出窗口，并且我在单击主体时将它们隐藏在其中，那么它们都将停止，并且我需要在e.stopPropagation（）之后隐藏其余的弹出窗口。有没有更好的解决方案。@helpme我不明白你在说什么，你能解释得更清楚一点以便我能帮助你吗？+1只在处理DIV中的包装元素被单击的情况时发布了答案谢谢，但是你能检查演示吗，它不会通过在弹出窗口外单击来关闭弹出窗口。这是最好的答案。修复了小车咔哒声和车身咔哒声。我不明白为什么车这么多。我通过使用最稳定的JQuery版本1.9.1修复了代码，并将JQuery代码放入document.ready中，确保DOM就绪之前不会发生任何事情@Parrotmaster由于委派事件是在打开单击时触发的，因此也应将StopRopAgation与OP的原始代码一起使用。非常感谢您，@Parrotmaster解决了问题。请注意，
淡出
是它正常工作的关键。没有延迟褪色，模糊事件在popup div中的元素发生任何事件之前触发。如果您的弹出窗口包含静态内容，这是一个很好的解决方案。我的意思是说，如果您的弹出窗口包含表单输入或任何可以具有焦点属性的内容，那么div focus将模糊，并且您的按钮或输入将获得焦点，从而导致隐藏弹出窗口。这是有效的最好使用模式窗口，但使用上下文菜单或滑动面板，您不希望取消div外的第一次单击，因为这不利于可用性。我使用颜色选择器div窗口作为弹出菜单，用户可以单击网格中的任何颜色，如果他们在它外面点击，弹出的颜色选择器就会消失，这是一个非常酷的行为。
$(".transparent-back").on('click',function(){
    $('popup').fadeOut(300);
});

 //for closeing the popover when user click outside it will close all popover 
 var hidePopover = function(element) {
        var elementScope = angular.element($(element).siblings('.popover')).scope().$parent;
        elementScope.isOpen = false;
        elementScope.$apply();
        //Remove the popover element from the DOM
        $(element).siblings('.popover').remove();
    };
 $(document).ready(function(){
 $('body').on('click', function (e) {
       $("a").each(function () {
                    //Only do this for all popovers other than the current one that cause this event
           if (!($(this).is(e.target) || $(this).has(e.target).length > 0) 
                && $(this).siblings('.popover').length !== 0 && $(this).siblings('.popover').has(e.target).length === 0)                  
                    {
                         hidePopover(this);
                    }
        });
    });
 });

var modal = document.getElementById("reject-popup");    
window.onclick = function (event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }

}