当用户在其外部单击时，使用jQuery隐藏DIV

Question

当用户在其外部单击时，使用jQuery隐藏DIV

我正在使用此代码：

$('body').click(function() {
   $('.form_wrapper').hide();});$('.form_wrapper').click(function(event){
   event.stopPropagation();});

这个HTML：

<div class="form_wrapper">
   <a class="agree" href="javascript:;">I Agree</a>
   <a class="disagree" href="javascript:;">Disagree</a></div>

问题是我在DIV内部有链接，当它们点击时它们不再有效。

Answer 1

你最好选择这样的东西：var mouse_is_inside = false;$(document).ready(function(){     $('.form_content').hover(function(){          mouse_is_inside=true;      }, function(){          mouse_is_inside=false;      });     $("body").mouseup(function(){          if(! mouse_is_inside) $('.form_wrapper').hide();     });});

Answer 2

此代码检测页面上的任何单击事件，然后#CONTAINER当且仅当单击的#CONTAINER元素既不是元素也不是其后代之一时隐藏元素。$(document).on('click', function (e) {     if ($(e.target).closest("#CONTAINER").length === 0) {         $("#CONTAINER").hide();     }});

Answer 3

您可能希望检查为正文触发的单击事件的目标，而不是依赖于stopPropagation。就像是：$("body").click(   function(e)   {     if(e.target.className !== "form_wrapper")     {       $(".form_wrapper").hide();     }   });此外，主体元素可以不包括浏览器中所示的整个视觉空间。如果您注意到您的点击未注册，则可能需要添加HTML元素的点击处理程序。