如何在元素之外的任何地方隐藏单击事件上的元素？

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

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

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

249795 次浏览
小开

试试这个

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


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


});
});

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

编辑 因为你添加了另一块，它会像这样工作:

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


});
});
小开

这不起作用——当您单击其中的.myDIV 时，它会隐藏该.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>
小开
最佳答案

如果我理解的话，你想隐藏一个 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，它将取消单击事件。

小开

下面的代码示例似乎最适合我。您可以使用“ 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 创建了一个可以向下滑动的登录框。为了获得最佳的用户体验，我决定在用户单击除了框之外的某个地方时让框消失。我有点不好意思花了四个小时修这个。但是，我是新来的。

也许我的代码能帮到别人:

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

对上述建议只有两个小小的改进:

  • unbind the document.click when done

  • 停止触发这个事件的传播，假设它是一个点击

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

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

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

小开

从 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 (见: docs) but because we need to do conditionals within the handler that isn't applicable here.

小开

你还可以做的是:

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


var container = $("div");


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


}


});

如果您的目标不是 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();
}
});
小开

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

$(document).on('click', function(e) {
if(!$.contains($('.yourContainer').get(0), e.target)) {
$('.yourContainer').hide();
}
});
小开 
$('html').click(function() {
//Hide the menus if it is visible
});


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

但是你也要记住这些事情

小开 
  $(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.

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

小开

下面是一个基于 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/

小开

试试这个:

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

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

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

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

这是由上述其他解决方案构成的。

$(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>
小开 
$(document).click(function() {
var container = $("#container");
if (!container.is(event.target) &&
!container.has(event.target).length) {
container.hide();
}
});

提交答案