Answers:
据我了解，您要在除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，它将取消单击事件。
.myDiv元素中包含其他元素，则在Safari中将无法使用。例如，如果您在中有一个选择下拉列表.myDiv。当您单击选择时，它将认为您在框外单击。
试试这个
$('.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
});
});从jQuery 1.7开始，有一种处理事件的新方法。我以为我在这里回答只是为了演示如何以“新”方式进行此操作。如果还没有，我建议您阅读jQuery文档的“ on”方法。
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（参见：docs）使此行为自动化，但是因为我们需要在此处不适用的处理程序中执行条件操作。
下面的代码示例似乎最适合我。虽然您可以使用'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>谢谢，托马斯。我是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>我做了以下。想到共享，这样其他人也可以受益。
$("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"});
}
});
});让我知道我是否可以帮助某人。
div#newButtonDiv未单击，则不会执行。我建议您删除第.click()4行上的第二个（如果这样做，请记住删除右括号，括号和分号-第9行）。
试试这个：
$(document).mouseup(function (e) {
var div = $("#yourdivid");
if (!div.is(e.target) && div.has(e.target).length === 0)
{
div.hide();
}
});在非子元素中单击时隐藏容器div的另一种方法；
$(document).on('click', function(e) {
if(!$.contains($('.yourContainer').get(0), e.target)) {
$('.yourContainer').hide();
}
}); $(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元素。在做任何事情之前，请先了解代码并复制...
试试这个，对我来说很完美。
$(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();
}
});$('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/
这是一个基于Sandeep Pal的答案的CSS /小型JS解决方案：
$(document).click(function (e)
{
if (!$("#noticeMenu").is(e.target) && $("#noticeMenu").has(e.target).length == 0)
{
$("#menu-toggle3").prop('checked', false);
}
});单击复选框，然后在菜单之外进行尝试：
对上述建议仅进行了2个小改进：
假设发生点击，请停止在触发此事件的事件上进行传播
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();
});$(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>$( "element" ).focusout(function() {
//your code on element
})$(document).mouseup(function (e)
{
var mydiv = $('div#mydiv');
if (!mydiv.is(e.target) && mydiv.has(e.target).length === 0){
search.slideUp();
}
});