当用户在DIV之外单击时，使用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单击时它们不再起作用。

遇到同样的问题，想出了这个简单的解决方案。它甚至可以递归工作：

$(document).mouseup(function(e) 
{
    var container = $("YOUR CONTAINER SELECTOR");

    // if the target of the click isn't the container nor a descendant of the container
    if (!container.is(e.target) && container.has(e.target).length === 0) 
    {
        container.hide();
    }
});

您最好选择这样的东西：

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();
    });
});

此代码检测到页面上的任何click事件，然后#CONTAINER仅当被单击的#CONTAINER元素既不是元素也不是其后代之一时，才隐藏元素。

$(document).on('click', function (e) {
    if ($(e.target).closest("#CONTAINER").length === 0) {
        $("#CONTAINER").hide();
    }
});

您可能要检查为主体触发的click事件的目标，而不是依赖stopPropagation。

就像是：

$("body").click
(
  function(e)
  {
    if(e.target.className !== "form_wrapper")
    {
      $(".form_wrapper").hide();
    }
  }
);

同样，主体元素可能不包括浏览器中显示的整个视觉空间。如果您发现点击没有注册，则可能需要为HTML元素添加点击处理程序。

现场演示

检查点击区域不在目标元素中还是其子元素中

$(document).click(function (e) {
    if ($(e.target).parents(".dropdown").length === 0) {
        $(".dropdown").hide();
    }
});

更新：

jQuery停止传播是最好的解决方案

现场演示

$(".button").click(function(e){
    $(".dropdown").show();
     e.stopPropagation();
});

$(".dropdown").click(function(e){
    e.stopPropagation();
});

$(document).click(function(){
    $(".dropdown").hide();
});

$(document).click(function(event) {
    if ( !$(event.target).hasClass('form_wrapper')) {
         $(".form_wrapper").hide();
    }
});

将解决方案更新为：

• 使用mouseenter和mouseleave代替
• 悬停使用实时事件绑定

var mouseOverActiveElement = false;

$('.active').live('mouseenter', function(){
    mouseOverActiveElement = true; 
}).live('mouseleave', function(){ 
    mouseOverActiveElement = false; 
});
$("html").click(function(){ 
    if (!mouseOverActiveElement) {
        console.log('clicked outside active element');
    }
});

没有jQuery 的最流行答案的解决方案：

document.addEventListener('mouseup', function (e) {
    var container = document.getElementById('your container ID');

    if (!container.contains(e.target)) {
        container.style.display = 'none';
    }
}.bind(this));

MDN：https：//developer.mozilla.org/en/docs/Web/API/Node/contains

现场演示ESC功能

在台式机和移动设备上均可使用

var notH = 1,
    $pop = $('.form_wrapper').hover(function(){ notH^=1; });

$(document).on('mousedown keydown', function( e ){
  if(notH||e.which==27) $pop.hide();
});

_{如果在某些情况下，您需要确保在单击文档时您的元素确实可见： if($pop.is(':visible') && (notH||e.which==27)) $pop.hide();}

这样的东西行不行？

$("body *").not(".form_wrapper").click(function() {

});

要么

$("body *:not(.form_wrapper)").click(function() {

});

甚至是运动鞋：

$("html").click(function(){ 
    $(".wrapper:visible").hide();
});

您可以设置tabindex为父级<div>并监听focusout事件，而不是监听DOM来隐藏一个特定元素，而无需每次单击。

设置tabindex将确保在blur上触发事件<div>（通常不会触发）。

因此，您的HTML如下所示：

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

还有你的JS：

$('.form_wrapper').on('focusout', function(event){
    $('.form_wrapper').hide();
});

对于IPAD和IPHONE等触控设备，我们可以使用以下代码

$(document).on('touchstart', function (event) {
var container = $("YOUR CONTAINER SELECTOR");

if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.hide();
    }
});

这是我在另一个线程上找到的jsfiddle，它也可以使用esc键：http : //jsfiddle.net/S5ftb/404

    var button = $('#open')[0]
    var el     = $('#test')[0]

    $(button).on('click', function(e) {
      $(el).show()
      e.stopPropagation()
    })

    $(document).on('click', function(e) {
      if ($(e.target).closest(el).length === 0) {
        $(el).hide()
      }
    })

    $(document).on('keydown', function(e) {
      if (e.keyCode === 27) {
        $(el).hide()
      }
    })

基于prc322的出色回答。

function hideContainerOnMouseClickOut(selector, callback) {
  var args = Array.prototype.slice.call(arguments); // Save/convert arguments to array since we won't be able to access these within .on()
  $(document).on("mouseup.clickOFF touchend.clickOFF", function (e) {
    var container = $(selector);

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
      container.hide();
      $(document).off("mouseup.clickOFF touchend.clickOFF");
      if (callback) callback.apply(this, args);
    }
  });
}

这增加了几件事...

1. 放在带有“无限” args回调的函数中
2. 添加了对jquery的.off（）的调用，并与事件名称空间配对，以在事件运行后将其与文档解除绑定。
3. 随附的用于移动功能的触摸端

我希望这可以帮助别人！

如果您在ios上遇到问题，则mouseup在Apple设备上不起作用。

jquery中的mousedown / mouseup是否可用于ipad？

我用这个：

$(document).bind('touchend', function(e) {
        var container = $("YOURCONTAINER");

          if (container.has(e.target).length === 0)
          {
              container.hide();
          }
      });

（只需添加到prc322的答案即可。）

就我而言，我正在使用此代码隐藏用户单击相应选项卡时出现的导航菜单。我发现添加一个额外的条件很有用，容器外部的点击目标不是链接。

$(document).mouseup(function (e)
{
    var container = $("YOUR CONTAINER SELECTOR");

    if (!$("a").is(e.target) // if the target of the click isn't a link ...
        && !container.is(e.target) // ... or the container ...
        && container.has(e.target).length === 0) // ... or a descendant of the container
    {
        container.hide();
    }
});

这是因为我网站上的某些链接向页面添加了新内容。如果在导航菜单消失的同时添加了新内容，则可能会使用户迷失方向。

这么多的答案，一定是通过的权利，已经添加了一个答案...我没有看到最新的（jQuery 3.1.1）答案-因此：

$(function() {
    $('body').on('mouseup', function() {
        $('#your-selector').hide();
    });
});

var n = 0;
$("#container").mouseenter(function() {
n = 0;

}).mouseleave(function() {
n = 1;
});

$("html").click(function(){ 
if (n == 1) {
alert("clickoutside");
}
});

 $('body').click(function(event) {
    if (!$(event.target).is('p'))
    {
        $("#e2ma-menu").hide();
    }
});

p是元素名称。也可以传递id或类或元素名称的地方。

如果单击.form_wrapper，则返回false：

$('body').click(function() {
  $('.form_wrapper').click(function(){
  return false
});
   $('.form_wrapper').hide();
});

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

将click事件附加到表单包装器外部的顶级元素，例如：

$('#header, #content, #footer').click(function(){
    $('.form_wrapper').hide();
});

这也可以在触摸设备上使用，只需确保选择器列表中不包括.form_wrapper的父项即可。

var exclude_div = $("#ExcludedDiv");;  
$(document).click(function(e){
   if( !exclude_div.is( e.target ) )  // if target div is not the one you want to exclude then add the class hidden
        $(".myDiv1").addClass("hidden");  

}); 

小提琴

从https://sdtuts.com/click-on-not-specified-element/复制

现场演示http://demos.sdtuts.com/click-on-specified-element

$(document).ready(function () {
    var is_specified_clicked;
    $(".specified_element").click(function () {
        is_specified_clicked = true;
        setTimeout(function () {
            is_specified_clicked = false;
        }, 200);
    })
    $("*").click(function () {
        if (is_specified_clicked == true) {
//WRITE CODE HERE FOR CLICKED ON OTHER ELEMENTS
            $(".event_result").text("you were clicked on specified element");
        } else {
//WRITE CODE HERE FOR SPECIFIED ELEMENT CLICKED
            $(".event_result").text("you were clicked not on specified element");
        }
    })
})

我这样做是这样的：

var close = true;

$(function () {

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

        if(close){
            div.hide();
        }
        close = true;
    })


alleswasdenlayeronclicknichtschliessensoll.click( function () {   
        close = false;
    });

});

dojo.query(document.body).connect('mouseup',function (e)
{
    var obj = dojo.position(dojo.query('div#divselector')[0]);
    if (!((e.clientX > obj.x && e.clientX <(obj.x+obj.w)) && (e.clientY > obj.y && e.clientY <(obj.y+obj.h))) ){
        MyDive.Hide(id);
    }
});

通过使用此代码，您可以隐藏任意多个项目

var boxArray = ["first element's id","second element's id","nth element's id"];
   window.addEventListener('mouseup', function(event){
   for(var i=0; i < boxArray.length; i++){
    var box = document.getElementById(boxArray[i]);
    if(event.target != box && event.target.parentNode != box){
        box.style.display = 'none';
    }
   }
})

您可以做的是将click事件绑定到文档，如果单击了下拉菜单中的某些内容，则会隐藏该下拉列表，但是如果单击了下拉菜单中的某些内容，则不会隐藏该下拉列表，因此您的“ show”事件（或slidedown或其他事件）显示下拉菜单）

    $('.form_wrapper').show(function(){

        $(document).bind('click', function (e) {
            var clicked = $(e.target);
            if (!clicked.parents().hasClass("class-of-dropdown-container")) {
                 $('.form_wrapper').hide();
            }
        });

    });

然后在隐藏它时，取消绑定click事件

$(document).unbind('click');

根据docs，其.blur()作用远超过<input>标记。例如：

$('.form_wrapper').blur(function(){
   $(this).hide();
});