我想知道当单击页面上的任何位置时，这是否是隐藏可见元素的正确方法。
$(document).click(function (event) {
$('#myDIV:visible').hide();
});
当点击事件发生在元素的边界内时，元素（div、span 等）不应消失。
Franek
问问题
243661 次
21 回答
209
如果我理解，当您单击除 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，它将取消点击事件。
于 2009-04-03T16:07:41.170 回答
26
试试这个
$('.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
});
});
于 2009-04-03T15:39:01.597 回答
22
从 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 ）自动执行此行为，但因为我们需要在处理程序中执行不适用于此处的条件。
于 2012-05-30T01:27:46.687 回答
14
以下代码示例似乎最适合我。虽然您可以使用“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>
于 2009-07-17T16:02:43.307 回答
6
谢谢，托马斯。我是 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>
于 2010-04-21T11:09:16.020 回答
5
我做了以下。想到分享，以便其他人也可以受益。
$("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"});
}
});
});
让我知道我是否可以帮助某人。
于 2012-05-21T15:32:48.440 回答
5
你还可以做的是：
$(document).click(function (e)
{
var container = $("div");
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.fadeOut('slow');
}
});
如果您的目标不是 div，则通过检查其长度是否为零来隐藏 div。
于 2013-05-11T15:06:35.760 回答
4
试试这个：
$(document).mouseup(function (e) {
var div = $("#yourdivid");
if (!div.is(e.target) && div.has(e.target).length === 0)
{
div.hide();
}
});
于 2015-08-16T06:14:18.177 回答
3
当点击发生在非子元素中时，隐藏容器 div 的另一种方法；
$(document).on('click', function(e) {
if(!$.contains($('.yourContainer').get(0), e.target)) {
$('.yourContainer').hide();
}
});
于 2014-09-17T18:46:29.223 回答
3
$(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 in 是文本框的名称，.suggest_container 是 ul 类名，.suggest_div 是我的自动建议的主要 div 元素。
此代码用于通过单击屏幕中的任何位置来隐藏 div 元素。在做每一件事之前，请理解代码并复制它......
于 2015-05-28T05:53:37.090 回答
2
试试这个，它对我来说很完美。
$(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();
}
});
于 2013-08-11T06:45:59.160 回答
2
$('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/
于 2015-02-03T10:49:08.187 回答
2
这是一个基于 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);
}
});
通过单击复选框然后在菜单之外尝试一下：
于 2015-07-28T10:08:22.260 回答
1
这不起作用 - 当您在其中单击时，它会隐藏 .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>
于 2009-04-03T15:58:55.717 回答
1
对上述建议仅有 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(); });
于 2012-02-13T16:21:54.847 回答
1
$(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>于 2017-10-15T10:07:40.407 回答
0
$( "element" ).focusout(function() {
//your code on element
})
于 2019-04-16T08:37:56.863 回答
0
这是由上述其他解决方案制成的。
$(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>
于 2020-08-11T19:15:13.090 回答
0
$(document).click(function() {
var container = $("#container");
if (!container.is(event.target) &&
!container.has(event.target).length) {
container.hide();
}
});
于 2021-06-02T13:03:56.723 回答
-1
$(document).mouseup(function (e)
{
var mydiv = $('div#mydiv');
if (!mydiv.is(e.target) && mydiv.has(e.target).length === 0){
search.slideUp();
}
});
于 2017-01-13T15:35:56.623 回答
-1
简单的解决方案：在某个特定元素之外的任何地方隐藏单击事件上的元素。
$(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();
});
于 2019-07-11T06:43:49.643 回答