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

score 2624 · Accepted Answer

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

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

score 211 · Accepted Answer

你最好用这样的东西：

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

score 101 · Accepted Answer

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

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

score 77 · Accepted Answer

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

就像是：

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

此外，body 元素可能不包括浏览器中显示的整个视觉空间。如果您注意到您的点击没有注册，您可能需要为 HTML 元素添加点击处理程序。

score 52 · Accepted Answer

现场演示

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

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

score 21 · Accepted Answer

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

score 19 · Accepted Answer

没有 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

score 18 · Accepted Answer

将解决方案更新为：

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

score 10 · Accepted Answer

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

score 9 · Accepted Answer

像这样的东西不会起作用吗？

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

});

或者

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

});

score 8 · Accepted Answer

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

score 7 · Accepted Answer

7

甚至更狡猾：

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

于 2011-08-10T20:58:45.370 回答

score 7 · Accepted Answer

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

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

score 6 · Accepted Answer

(Just adding on to prc322's answer.)

In my case I'm using this code to hide a navigation menu that appears when the user clicks an appropriate tab. I found it was useful to add an extra condition, that the target of the click outside the container is not a link.

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

This is because some of the links on my site add new content to the page. If this new content is added at the same time that the navigation menu disappears it might be disorientating for the user.

score 6 · Accepted Answer

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

score 6 · Accepted Answer

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

score 6 · Accepted Answer

建立在 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);
    }
  });
}

这增加了一些东西......

放置在带有“无限”参数的回调函数中
添加了对 jquery 的 .off() 的调用，并与事件命名空间配对，以便在事件运行后解除事件与文档的绑定。
包括用于移动功能的触摸端

我希望这可以帮助别人！

score 5 · Accepted Answer

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

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

我用这个：

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

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

score 4 · Accepted Answer

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

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

score 4 · Accepted Answer

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

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

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

score 4 · Accepted Answer

复制自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");
        }
    })
})

score 3 · Accepted Answer

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

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

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

score 3 · Accepted Answer

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");  

});

小提琴

score 3 · Accepted Answer

Attach a click event to top level elements outside the form wrapper, for example:

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

This will also work on touch devices, just make sure you don't include a parent of .form_wrapper in your list of selectors.

score 3 · Accepted Answer

$(document).ready(function() {
	$('.modal-container').on('click', function(e) {
	  if(e.target == $(this)[0]) {
		$(this).removeClass('active'); // or hide()
	  }
	});
});

.modal-container {
	display: none;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.5);
	z-index: 999;
}

.modal-container.active {
    display: flex;  
}

.modal {
	width: 50%;
	height: auto;
	margin: 20px;
	padding: 20px;
	background-color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-container active">
	<div class="modal">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac varius purus. Ut consectetur viverra nibh nec maximus. Nam luctus ligula quis arcu accumsan euismod. Pellentesque imperdiet volutpat mi et cursus. Sed consectetur sed tellus ut finibus. Suspendisse porttitor laoreet lobortis. Nam ut blandit metus, ut interdum purus.</p>
	</div>
</div>

score 2 · Accepted Answer

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

score 2 · Accepted Answer

我是这样做的：

var close = true;

$(function () {

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

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


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

});

score 2 · Accepted Answer

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

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

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

    });

然后在隐藏的时候，解绑点击事件

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

score 2 · Accepted Answer

通过使用此代码，您可以隐藏任意数量的项目

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

score 1 · Accepted Answer

根据 docs，.blur()不仅仅适用于<input>标签。例如：

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

score 1 · Accepted Answer

将接受的答案与弹出窗口一起使用时，您可能会遇到一些问题。在某些情况下，单击随机位置可能会导致不需要的操作，即错误地单击按钮可能会将您带到新页面。

我不确定这是否是最有效的解决方案，但为了防止这种情况，我建议使用screenmask。确保屏幕掩码位于标签的正下方，<body>以便它可以覆盖整个屏幕width:100%; height: 100%。另请注意，它首先是由z-index: 99. 如果您希望在屏幕掩码处于活动状态时可以点击另一个项目或 div，只需为该项目或 div 分配更高的 z-index。

屏幕掩码最初是不显示的 ( displayed:none)，单击时会调用隐藏函数 ( onclick="hidemenu()")。

<body>
<div class="screenmask" onclick="hidemenu()" style="position:fixed; width: 100%; height: 100%; top: 0px; right: 0px; display: none; z-index: 99;"></div>

处理“同一页面上的多个不同弹出菜单”的 javascript 函数可能如下所示：

<script>
// an element with onclick="showmenu('id_here')" pops a menu in the screen
function showmenu(id) {  
  var popmenu = document.getElementById(id); // assume popmenu is of class .cardmenu
  $('.cardmenu').hide();   // clear the screen from other popmenus first
  $(popmenu).show();          // pop the desired specific menu
  $('.screenmask').show(); // activate screenmask
}
    
function hidemenu() {      // called when clicked on the screenmask
  $('.cardmenu').hide();   // clear the screen from all the popmenus
  $('.screenmask').hide(); // deactivate screenmask
}
</script>

score 0 · Accepted Answer

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>

score 0 · Accepted Answer

该解决方案应该可以正常工作，这很容易：

jQuery(document).ready(function($) {
    jQuery(document).click(function(event) {
        if(typeof  jQuery(event.target).attr("class") != "undefined") {
            var classnottobeclickforclose = ['donotcountmeforclickclass1', 'donotcountmeforclickclass2','donotcountmeforclickclass3'];
            var arresult = jQuery.inArray(jQuery(event.target).attr("class"), classnottobeclickforclose);
            if (arresult < 0) {
                jQuery(".popup").hide();
            }
        }
    });
});

在上面的代码中更改 donotcountmeforclickclass1 ， donotcountmeforclickclass2 等与您用来显示弹出窗口或点击弹出窗口的类不应该影响，因此您必须明确添加您用来打开弹出窗口的类。

用弹出类更改 .popup 类。

score 0 · Accepted Answer

切换常规和触摸设备

不久前，我在这里阅读了一些答案，并创建了一些用于 div 的代码，该代码用作弹出气泡。

$('#openPopupBubble').click(function(){
    $('#popupBubble').toggle();

    if($('#popupBubble').css('display') === 'block'){
        $(document).bind('mousedown touchstart', function(e){
            if($('#openPopupBubble').is(e.target) || $('#openPopupBubble').find('*').is(e.target)){
                $(this).unbind(e);
            } 
            else if(!$('#popupBubble').find('*').is(e.target)){
                $('#popupBubble').hide();
                $(this).unbind(e);
            }
        });
    }
});

您还可以使用类使其更加抽象，并根据触发点击事件的按钮选择正确的弹出气泡。

$('body').on('click', '.openPopupBubble', function(){
    $(this).next('.popupBubble').toggle();

    if($(this).next('.popupBubble').css('display') === 'block'){
        $(document).bind('mousedown touchstart', function(e){
            if($(this).is(e.target) || $(this).find('*').is(e.target)){
                $(this).unbind(e);
            } 
            else if(!$(this).next('.popupBubble').find('*').is(e.target)){
                $(this).next('.popupBubble').hide();
                $(this).unbind(e);
            }
        });
    }
});

score 0 · Accepted Answer

我正在研究一个搜索框，该框根据已处理的关键字显示自动完成。当我不想点击任何选项时，我将使用下面的代码来隐藏已处理的列表并且它可以工作。

$(document).click(function() {
 $('#suggestion-box').html("");
});

建议框是我在其中显示值的自动完成容器。

score -2 · Accepted Answer

$(document).ready(function() {

$('.headings').click(function () {$('#sub1').css("display",""); });
$('.headings').click(function () {return false;});
$('#sub1').click(function () {return false;});
$('body').click(function () {$('#sub1').css("display","none");

})});

score -3 · Accepted Answer

我认为这会容易得多。我是这样做的：

$(':not(.form_wrapper)').click(function() {
    $('.form_wrapper').hide();
});

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

37 回答 37

切换常规和触摸设备

Related

Reference