blocks|key|1590096|text|这不起作用-当您在.myDIV内部单击时，它会隐藏该work。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1590097|$('.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>|code-block|syntax|javascript|1590098|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

<pre><code>$('.openDiv').click(function(e) {
$('.myDiv').show(); 
e.stopPropagation();
})

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

});

});

&lt;a class="openDiv"&gt;DISPLAY DIV&lt;/a&gt;

&lt;div class="myDiv"&gt;HIDE DIV&lt;/div&gt;
</code></pre>


blocks|key|1590128|text|如果我理解的话，当你点击任何地方而不是div时，你想隐藏一个div，如果你在div上点击，那么它不应该关闭。你可以用下面的代码做到这一点：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1590129|$(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
});|code-block|syntax|javascript|1590130|这会将单击绑定到整个页面，但如果您单击有问题的div，它将取消单击事件。|1590131|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>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 that with this code:</p>

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

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


blocks|key|1374975|text|下面的代码示例似乎最适合我。而你可以使用'return+false‘来停止对div或它的任何子级的所有事件的处理。如果希望在弹出式div+(例如，弹出式登录表单)上具有控件，则需要使用event.stopPropogation()。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1374976|<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>|code-block|syntax|javascript|1374977|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>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().</p>

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

    &lt;script src="jquery.js" type="text/javascript"&gt;&lt;/script&gt;

    &lt;script type="text/javascript"&gt;
        var box = $('#box');
        var link = $('#link');

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

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

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

    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|1375027|text|谢谢，托马斯。我是JS的新手，我一直在疯狂地寻找问题的解决方案。你的帮助很大。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1375028|我用jquery制作了一个可以滑动的登录框。为了获得最好的用户体验，我希望当用户单击某个地方而不是框时，使框消失。我对花了大约四个小时来解决这个问题感到有点尴尬。但是，嘿，我是新来JS的。|1375029|也许我的代码可以帮助某些人：|1375030|<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>|code-block|syntax|javascript|1375031|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

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

<p>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.</p>

<p>Maybe my code can help someone out:</p>

<pre><code>&lt;body&gt;
&lt;button class="login"&gt;Logg inn&lt;/button&gt;
&lt;script type="text/javascript"&gt;

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

&lt;script type="text/javascript"&gt;
    var box = $('#box');
    var login = $('.login');

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

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

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

&lt;/script&gt;

&lt;/body&gt;
</code></pre>


blocks|key|1375085|text|我做了下面的工作。我想过分享，这样别人也能从中受益。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1375086|$("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"});
++++++++}
++++});
});|code-block|syntax|javascript|1375087|如果我能帮上什么忙，请告诉我。|1375088|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I did the below. Thought of sharing so someone else could also benefit.</p>

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

<p>Let me know if I can help someone on this.</p>


blocks|key|1590350|text|从jQuery+1.7开始，有了一种处理事件的新方法。我想我应该在这里回答，只是为了演示我可能如何以“新”的方式来做这件事。如果您还没有，我建议您阅读jQuery+docs+for+the+"on"+method。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1590351|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);|code-block|syntax|javascript|1590352|这里我们滥用了jQuery的选择器和冒泡事件。请注意，我要确保在之后清理事件处理程序。您可以使用$('.container').one+(see:+docs)自动执行此行为，但因为我们需要在处理程序中执行条件，这在这里是不适用的。|style|CODE|1590353|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/on/|1|http://api.jquery.com/one/^0|23|V|0|0|0|1C|J|1X|9|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|11|8|@$A|12|B|13|K|L]]|9|@$A|14|B|15|1|16]]|C|$]]|$1|M|3|-4|5|6|7|17|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]|U|$5|P|Q|R|C|$S|V]]]]

<p>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 <a href="http://api.jquery.com/on/">jQuery docs for the "on" method</a>.</p>

<pre><code>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);
</code></pre>

<p>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 <code>$('.container').one</code> (<a href="http://api.jquery.com/one/">see: docs</a>) but because we need to do conditionals within the handler that isn't applicable here. </p>


blocks|key|1375193|text|您还可以做的是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1375194|$(document).click(function+(e)
{

++var+container+=+$("div");

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

+++}

});|code-block|syntax|javascript|1375195|如果您的目标不是div，则通过检查其长度是否等于零来隐藏div。|1375196|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>What you can also do is:</p>

<pre><code>$(document).click(function (e)
{

  var container = $("div");

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

   }

});
</code></pre>

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


blocks|key|1590424|text|试试这个，它很适合我。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1590425|$(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();
++++}
});|code-block|syntax|javascript|1590426|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Try this, it's  working perfect for me.</p>

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

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


blocks|key|1375244|text|另一种隐藏容器div的方法是，当在非子元素中单击时；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1375245|$(document).on('click',+function(e)+{
++++if(!$.contains($('.yourContainer').get(0),+e.target))+{
++++++++$('.yourContainer').hide();
++++}
});|code-block|syntax|javascript|1375246|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

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


blocks|key|1590511|text|$('html').click(function()+{
//Hide+the+menus+if+it+is+visible
});

$('#menu_container').click(function(event){
++++event.stopPropagation();
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1590512|但是你也需要记住这些事情。http://css-tricks.com/dangers-stopping-event-propagation/|unstyled|offset|length|1590513|entityMap|0|LINK|mutability|MUTABLE|url|http://css-tricks.com/dangers-stopping-event-propagation/^0|0|D|1L|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@$G|S|H|T|1|U]]|A|$]]|$1|I|3|-4|5|F|7|V|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P]]]]

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

$('#menu_container').click(function(event){
    event.stopPropagation();
});
</code></pre>

<p>but you need to keep in mind these things as well. <a href="http://css-tricks.com/dangers-stopping-event-propagation/" rel="nofollow">http://css-tricks.com/dangers-stopping-event-propagation/</a></p>


blocks|key|1375332|text|++$(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();
++++++++}
++++});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1375333|其中，#suggest_input+in是textbox的名称，.suggest_container是ul类名，.suggest_div是我的自动建议的主要div元素。|unstyled|1375334|此代码用于通过单击屏幕上的任意位置来隐藏div元素。在做每件事之前，请理解代码并复制它。|1375335|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

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

<p>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.</p>

<p>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...</p>


blocks|key|1590650|text|这是一个基于Sandeep+Pal的答案的CSS/small+JS解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1590651|$(document).click(function+(e)
{
++if+(!$("#noticeMenu").is(e.target)+&&+$("#noticeMenu").has(e.target).length+==+0)
++{
+++$("#menu-toggle3").prop('checked',+false);
++}
});|code-block|syntax|javascript|1590652|通过单击复选框然后在菜单之外进行尝试：|1590653|https://jsfiddle.net/qo90txr8/|offset|length|1590654|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|U|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|V|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|W|8|@]|9|@$K|X|L|Y|1|Z]]|A|$]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|J]]]]

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

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

<p>Try it out by clicking the checkbox and then outside of the menu:</p>

<p><a href="https://jsfiddle.net/qo90txr8/" rel="nofollow">https://jsfiddle.net/qo90txr8/</a></p>


blocks|key|1375422|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1375423|+$(document).mouseup(function+(e)+{
++++var+div+=+$("#yourdivid");
++++if+(!div.is(e.target)+&&+div.has(e.target).length+===+0)+
++++{
+++++++div.hide();
+++++}
++++});|code-block|syntax|javascript|1375424|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Try this:</p>

<pre><code> $(document).mouseup(function (e) {
    var div = $("#yourdivid");
    if (!div.is(e.target) &amp;&amp; div.has(e.target).length === 0) 
    {
       div.hide();
     }
    });
</code></pre>


blocks|key|1375426|text|$(document).mouseup(function+(e)
{
++++var+mydiv+=+$('div#mydiv');
++++if+(!mydiv.is(e.target)+&&+mydiv.has(e.target).length+===+0){
+++++++search.slideUp();
++++}
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1375427|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

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


blocks|key|1375438|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1375439|$(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);}
++++});+
+++
++++
});|code-block|syntax|javascript|1375440|<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%25;height:200px;background-color:pink;">
<div+class="div3"+style="width:80px;height:80px;display:none;background-color:blue;"></div><body>|1375441|1375442|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){

$("button").click(function(){
   
       
        $(".div3").toggle(1000);
    });
   $("body").click(function(event) {
   if($(event.target).attr('class') != '1' &amp;&amp; $(event.target).attr('class') != 'div3'){
       $(".div3").hide(1000);}
    }); 
   
    
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"&gt;&lt;/script&gt;
&lt;button class="1"&gt;Click to fade in boxes&lt;/button&gt;&lt;br&gt;&lt;br&gt;

&lt;body style="width:100%;height:200px;background-color:pink;"&gt;
&lt;div class="div3" style="width:80px;height:80px;display:none;background-color:blue;"&gt;&lt;/div&gt;&lt;body&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1375463|text|$(+"element"+).focusout(function()+{
++++//your+code+on+element
})|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1375464|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

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


blocks|key|1590752|text|简单的解决方案:在某个特定元素之外的任何位置隐藏click事件上的元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1590753|$(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();
++++++++++++});|code-block|syntax|javascript|1590754|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Simple Solution: hide an element on a click event anywhere outside of some specific element.</p>

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


blocks|key|1590802|text|这是由上面的其他解决方案构成的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1590803|$(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;++++++++++++++++++++++++++++++++++++++++
++++});
});|code-block|syntax|javascript|1590804|<div>
++++<div>
++++++++<button>+Press+here+for+content</button>+
++++++<div+class="area">
++++++++<div+class="interface">+Content</div>
++++++</div>
++++</div>+++++++
</div>|1590805|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>This is made from the other solutions above.</p>
<pre><code>$(document).ready(function(){  

    $(&quot;button&quot;).click(function(event){
        $(&quot;.area&quot;).toggle();
        event.stopPropagation();    //stops the click event to go &quot;throu&quot; the button an hit the document
    });
    
    
    $(document).click(function() {
        $(&quot;.area&quot;).hide();
    });
    
    
    $(&quot;.interface&quot;).click(function(event) {
        event.stopPropagation();
        return false;                                        
    });
});
</code></pre>
<pre><code>
&lt;div&gt;
    &lt;div&gt;
        &lt;button&gt; Press here for content&lt;/button&gt; 
      &lt;div class=&quot;area&quot;&gt;
        &lt;div class=&quot;interface&quot;&gt; Content&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;       
&lt;/div&gt;
</code></pre>


blocks|key|1375569|text|$(document).click(function()+{
++var+container+=+$("#container");
++if+(!container.is(event.target)+&&
++++!container.has(event.target).length)+{
++++container.hide();
++}
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1375570|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$(document).click(function() {
  var container = $(&quot;#container&quot;);
  if (!container.is(event.target) &amp;&amp;
    !container.has(event.target).length) {
    container.hide();
  }
});


</code></pre>


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

<pre><code>$(document).click(function (event) {            
    $('#myDIV:visible').hide();
});
</code></pre>

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


How do I hide an element on a click event anywhere outside of the element?

容器

jQuery

我想知道当单击页面上的任何位置时，这是否是隐藏可见元素的正确方式。$(document).click(function (event) {                $('#myDIV:visible').hide();});元素(div、span等)当单击事件发生在元素的边界内时，不应该消失。

问如何在click事件中隐藏元素之外的任何位置？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在click事件中隐藏元素之外的任何位置？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在click事件中隐藏元素之外的任何位置？
EN