当用户在其外部单击时，使用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元素的点击处理程序。