通过单击外部关闭div

Question

我想通过单击其中的关闭链接 或 单击该div外部的任何位置来隐藏div。

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

$(".link").click(function() {

  $(".popup").fadeIn(300);

}



);

$('.close').click(function() {

  $(".popup").fadeOut(300);

}



);

$('body').click(function() {

  if (!$(this.target).is('.popup')) {

    $(".popup").hide();

  }

}



);


<div class="box">

  <a href="#" class="link">Open</a>

  <div class="popup">

    Hello world

    <a class="close" href="#">Close</a>

  </div>

</div>

Answer 1

另一种使您的jsfiddle减少错误的方法（需要双击打开）。

这不会在主体级别使用任何委托事件

设置tabindex="-1"为DIV .popup（以及样式CSS outline:0）

$(".link").click(function(e){
    e.preventDefault();
    $(".popup").fadeIn(300,function(){$(this).focus();});
});

$('.close').click(function() {
   $(".popup").fadeOut(300);
});
$(".popup").on('blur',function(){
    $(this).fadeOut(300);
});