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

Question

我正在使用此代码:

$('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

有同样的问题,想出了这个简单的解决方案.它甚至可以递归工作:

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

Answer 2

你最好选择这样的东西:

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 3

此代码检测页面上的任何单击事件,然后#CONTAINER当且仅当单击的#CONTAINER元素既不是元素也不是其后代之一时隐藏元素.

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

Answer 4

您可能希望检查为正文触发的单击事件的目标,而不是依赖于stopPropagation.

就像是:

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

此外,主体元素可以不包括浏览器中所示的整个视觉空间.如果您注意到您的点击未注册,则可能需要添加HTML元素的点击处理程序.

Answer 5

现场演示

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

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

Answer 6

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

Answer 7

将解决方案更新为:

• 改用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');
    }
});

Answer 8

最流行的答案是没有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

Answer 9

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

Answer 10

不会像这样的工作吗？

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

});

要么

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

});

Answer 11

这么多答案，必须是添加一个的通行权......我没有看到当前（jQuery 3.1.1）的答案 - 所以：

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

Answer 12

您可以设置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();
});

Answer 13

甚至是运动鞋：

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

Answer 14

如果您在使用 ios 时遇到问题，则 mouseup 无法在 Apple 设备上运行。

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

我用这个：

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

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

Answer 15

这是我在另一个线程上找到的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()
      }
    })

Answer 16

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

Answer 17

（只是添加到 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();
    }
});

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

Answer 18

基于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. 随附的用于移动功能的触摸端

我希望这可以帮助别人！