Question

我想知道这是否是在页面上任何位置单击时隐藏可见元素的正确方法。

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

当元素边界内发生click事件时，元素（div，span等）不应消失。

Answer 1

如果我理解你想在除了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
});

这会将点击绑定到整个页面，但如果您点击相关的div，它将取消点击事件。

Answer 2

试试这个

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

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

  });
});

我使用类名而不是ID ，因为在asp.net中你必须担心额外的东西.net附加到id

修改 - 既然你添加了另一篇文章，那就像这样：

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

Answer 3

从jQuery 1.7开始，有一种处理事件的新方法。我以为我会在这里回答只是为了演示如何以“新”的方式来做这件事。如果还没有，我建议您阅读jQuery docs for the "on" method。

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

这里我们滥用jQuery的选择器和冒泡事件。请注意，我确保事后清理事件处理程序。您可以使用$('.container').one（see: docs）自动执行此行为，但因为我们需要在处理程序中执行不适用的条件。

Answer 4

以下代码示例似乎最适合我。虽然你可以使用'return false'来停止对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>

Answer 5

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

我使用jquery制作一个向下滑动的登录框。为了获得最佳用户体验，我希望当用户点击某个地方而不是框时，该框会消失。使用大约四个小时解决这个问题我有点尴尬。但是，嘿，我是JS的新手。

也许我的代码可以帮助别人：

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

Answer 6

我做了以下。想分享让其他人也受益。

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

如果我可以帮助此人，请告诉我。

Answer 7

您还可以做的是：

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

  var container = $("div");

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

   }

});

如果您的目标不是div，则通过检查其长度等于零来隐藏div。

Answer 8

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

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

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

此处#suggest_input输入是文本框的名称，.suggest_container是ul类名称.suggest_div是我自动建议的主要div元素。

此代码用于通过单击屏幕中的任何位置来隐藏div元素。在做所有事情之前，请理解代码并复制它......

Answer 10

试试这个，它对我来说非常适合。

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

Answer 11

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

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

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

Answer 12

这是一个基于Sandeep Pal答案的工作CSS /小型JS解决方案：

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

单击复选框然后单击菜单外部尝试：

https://jsfiddle.net/qo90txr8/

Answer 13

这不起作用 - 当你点击它时，它会隐藏.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>

Answer 14

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 15

对上述建议只做了两点小改进：

完成后取消绑定document.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();
});

Answer 16

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

Answer 17

$( "element" ).focusout(function() {
    //your code on element
})

Answer 18

这是由上面的其他解决方案制成的。

$(document).ready(function(){  

    $("button").click(function(event){
        $(".area").toggle();
        event.stopPropagation();    //stops the click event to go "throu" the button an hit the document
    });
    
    
    $(document).click(function() {
        $(".area").hide();
    });
    
    
    $(".interface").click(function(event) {
        event.stopPropagation();
        return false;                                        
    });
});


<div>
    <div>
        <button> Press here for content</button> 
      <div class="area">
        <div class="interface"> Content</div>
      </div>
    </div>       
</div>

Answer 19

$(document).click(function() {
  var container = $("#container");
  if (!container.is(event.target) &&
    !container.has(event.target).length) {
    container.hide();
  }
});

Answer 20

简单的解决方案：在某些特定元素之外的任何地方的click事件中隐藏元素。

$(document).on('click', function () {
                $('.element').hide();
            });
            //element will not Hide on click some specific control inside document
            $('.control-1').on('click', function (e) {
                e.stopPropagation();
            });

点击页面上的任何位置时，jQuery hide元素

20 个答案: