当单击页面上的任何位置时，jQuery隐藏元素

I would like to know whether this is the correct way of hiding visible elements when clicked anywhere on the page.

我想知道当点击页面上的任何地方时，这是否是隐藏可见元素的正确方法。

$(document).click(function (event) {            
    $('#myDIV:visible').hide();
});

The element (div, span etc) shouldn't disappear when click event occurs within the boundaries of the element.

当单击事件发生在元素的边界内时，元素(div, span等)不应该消失。

17 个解决方案

#1

187

if i understand you want to hide a div when you click anywhere but the div, and if you do click while over the div, then it should NOT close. you can do this:

如果我理解你想要隐藏一个div，当你点击除div之外的任何地方时，如果你点击了div，那么它不应该关闭。你可以这样做:

$(document).click(function() {
    alert("me");
});
$(".myDiv").click(function(e) {
    e.stopPropagation(); // This is the preferred method.
    return false;        // This should not be used unless you do not want
                         // any click events registering inside the div
});

This binds the click to the entire page, but if you click on the div in question it will cancel the click event.

这就把点击绑定到整个页面，但是如果你点击这个div，它会取消点击事件。

#2

Try this

试试这个

 $('.myDiv').click(function(e) { //button click class name is myDiv
  e.stopPropagation();
 })

 $(function(){
  $(document).click(function(){  
  $('.myDiv').hide(); //hide the button

  });
});

I use class name instead of ID, because in asp.net you have to worry about the extra stuff .net attaches to the id

我使用类名而不是ID，因为在asp.net中，你需要担心额外的。net附加到ID上。

EDIT- Since you added a another piece, it would work like this:

编辑——因为您添加了另一个片段，它的工作方式如下:

 $('.myDiv').click(function() { //button click class name is myDiv
  e.stopPropagation();
 })

 $(function(){
  $('.openDiv').click(function() {
  $('.myDiv').show(); 

  });
  $(document).click(function(){  
  $('.myDiv').hide(); //hide the button

  });
});

#3

As of jQuery 1.7 there's a new way to handle events. I thought I'd answer here just to demonstrate how I might go about doing this the "new" way. If you haven't, I recommend you read the jQuery docs for the "on" method.

对于jQuery 1.7，有一种新的处理事件的方法。我想我在这里回答只是为了展示我如何用“新的”方式来做这件事。如果没有，我建议您阅读“on”方法的jQuery文档。

var handler = function(event){
  // if the target is a descendent of container do nothing
  if($(event.target).is(".container, .container *")) return;

  // remove event handler from document
  $(document).off("click", handler);

  // dostuff
}

$(document).on("click", handler);

Here we're abusing jQuery's selectors and bubbling of events. Note that I make sure I clean the event handler up afterwards. You can automate this behaviour with $('.container').one (see: docs) but because we need to do conditionals within the handler that isn't applicable here.

在这里，我们滥用jQuery的选择器和事件。注意，我确保在之后清理事件处理程序。您可以使用$('.container')将此行为自动化。第一个(参见:docs)，但是因为我们需要在处理程序中做一些这里不适用的条件。

#4

This following code example seems to work best for me. While you can use 'return false' that stops all handling of that event for the div or any of it's children. If you want to have controls on the pop-up div (a pop-up login form for example) you need to use event.stopPropogation().

下面的代码示例似乎最适合我。虽然可以使用'return false'来停止对div或它的任何子div的所有处理。如果您想要对弹出式div(例如一个弹出式登录表单)进行控制，您需要使用event.stopPropogation()。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <a id="link" href="#">show box</a>
    <div id="box" style="background: #eee; display: none">
        <p>a paragraph of text</p>
        <input type="file"  />
    </div>

    <script src="jquery.js" type="text/javascript"></script>

    <script type="text/javascript">
        var box = $('#box');
        var link = $('#link');

        link.click(function() {
            box.show(); return false;
        });

        $(document).click(function() {
            box.hide();
        });

        box.click(function(e) {
            e.stopPropagation();
        });

    </script>
</body>
</html>

#5

Thanks, Thomas. I'm new to JS and I've been looking crazy for a solution to my problem. Yours helped.

谢谢你,托马斯。我是JS的新手，我一直在寻找解决问题的方法。你的帮助。

I've used jquery to make a Login-box that slides down. For best user experience I desided to make the box disappear when user clicks somewhere but the box. I'm a little bit embarrassed over using about four hours fixing this. But hey, I'm new to JS.

我使用jquery创建了一个可以向下滑动的登录框。为了获得最佳的用户体验，我希望当用户单击除该框之外的其他地方时，该框就会消失。我有点不好意思花了四个小时来修这个。但是，我是JS的新手。

Maybe my code can help someone out:

也许我的代码可以帮助某人:

<body>
<button class="login">Logg inn</button>
<script type="text/javascript">

    $("button.login").click(function () {
        if ($("div#box:first").is(":hidden")) {
                $("div#box").slideDown("slow");} 
            else {
                $("div#box").slideUp("slow");
                }
    });
    </script>
<div id="box">Lots of login content</div>

<script type="text/javascript">
    var box = $('#box');
    var login = $('.login');

    login.click(function() {
        box.show(); return false;
    });

    $(document).click(function() {
        box.hide();
    });

    box.click(function(e) {
        e.stopPropagation();
    });

</script>

</body>

#6

What you can also do is:

你还可以做的是:

$(document).click(function (e)
{

  var container = $("div");

   if (!container.is(e.target) && container.has(e.target).length === 0)
  {
 container.fadeOut('slow');

   }

});

If your target is not a div then hide the div by checking its length is equal to zero.

如果目标不是div，那么通过检查div的长度是否为0来隐藏它。

#7

I did the below. Thought of sharing so someone else could also benefit.

我做了以下。想要分享，这样其他人也能从中受益。

$("div#newButtonDiv").click(function(){
    $(this).find("ul.sub-menu").css({"display":"block"});

    $(this).click(function(event){
        event.stopPropagation();
        $("html").click(function(){
            $(this).find("ul.sub-menu").css({"display":"none"});
        }
    });
});

Let me know if I can help someone on this.

如果我能帮上什么忙，请告诉我。

#8

Another way of hiding the container div when a click happens in a not children element;

在not children元素中发生单击时隐藏容器div的另一种方法;

$(document).on('click', function(e) {
    if(!$.contains($('.yourContainer').get(0), e.target)) {
        $('.yourContainer').hide();
    }
});

#9

  $(document).on('click', function(e) { // Hides the div by clicking any where in the screen
        if ( $(e.target).closest('#suggest_input').length ) {
            $(".suggest_div").show();
        }else if ( ! $(e.target).closest('.suggest_container').length ) {
            $('.suggest_div').hide();
        }
    });

Here #suggest_input in is the name of textbox and .suggest_container is the ul class name and .suggest_div is the main div element for my auto-suggest.

这里#suggest_input是文本框的名称，.suggest_container是ul类名，.suggest_div是自动建议的主要div元素。

this code is for hiding the div elements by clicking any where in the screen. Before doing every thing please understand the code and copy it...

此代码用于通过单击屏幕中的任何位置隐藏div元素。在做每一件事之前，请先理解代码并复制它……

#10

Try this, it's working perfect for me.

试试这个，它对我来说非常有用。

$(document).mouseup(function (e)
{
    var searchcontainer = $("#search_container");

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

#11

$('html').click(function() {
//Hide the menus if it is visible
});

$('#menu_container').click(function(event){
    event.stopPropagation();
});

but you need to keep in mind these things as well. http://css-tricks.com/dangers-stopping-event-propagation/

但是你也要记住这些事情。http://css-tricks.com/dangers-stopping-event-propagation/

#12

Here is a working CSS/small JS solution based on the answer of Sandeep Pal:

下面是一个基于Sandeep Pal回答的CSS/small JS解决方案:

$(document).click(function (e)
{
  if (!$("#noticeMenu").is(e.target) && $("#noticeMenu").has(e.target).length == 0)
  {
   $("#menu-toggle3").prop('checked', false);
  }
});

Try it out by clicking the checkbox and then outside of the menu:

点击复选框，然后在菜单之外尝试:

https://jsfiddle.net/qo90txr8/

#13

Try this:

试试这个:

$(document).mouseup(function (e) {
var div = $("your div");
if (!div.is(e.target) && div.has(e.target).length === 0) 
{
   div.hide();
 }
});

#14

This doesn't work - it hides the .myDIV when you click inside of it.

这不起作用——当您单击它时，它会隐藏. mydiv。

$('.openDiv').click(function(e) {
$('.myDiv').show(); 
e.stopPropagation();
})

$(document).click(function(){  
$('.myDiv').hide(); 

});

});

<a class="openDiv">DISPLAY DIV</a>

<div class="myDiv">HIDE DIV</div>

#15

Just 2 small improvements to the above suggestions:

对以上建议只做2个小小的改进:

unbind the document.click when done
解开文档。点击完成后

stop propagation on the event that triggered this, assuming its a click

假设是单击，停止对触发此操作的事件的传播

jQuery(thelink).click(function(e){
    jQuery(thepop).show();

    // bind the hide controls
    var jpop=jQuery(thepop);
    jQuery(document).bind("click.hidethepop", function() {
            jpop.hide();
            // unbind the hide controls
            jQuery(document).unbind("click.hidethepop");
    });
    // dont close thepop when you click on thepop
    jQuery(thepop).click(function(e) {
        e.stopPropagation();
    });
    // and dont close thepop now 
    e.stopPropagation();
});

#16

$(document).ready(function(){

$("button").click(function(){
   
       
        $(".div3").toggle(1000);
    });
   $("body").click(function(event) {
   if($(event.target).attr('class') != '1' && $(event.target).attr('class') != 'div3'){
       $(".div3").hide(1000);}
    }); 
   
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<button class="1">Click to fade in boxes</button><br><br>

<body style="width:100%;height:200px;background-color:pink;">
<div class="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div><body>

#17

$(document).mouseup(function (e)
{
    var mydiv = $('div#mydiv');
    if (!mydiv.is(e.target) && mydiv.has(e.target).length === 0){
       search.slideUp();
    }
});

#1

187