jQuery скрыть элемент при нажатии в любом месте страницы

Я хотел бы знать, является ли это правильным способом скрытия видимых элементов при нажатии в любом месте страницы. 

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

элемент (div, span и т. д.) не должен исчезать, когда событие click происходит в границах элемента.

111
event-bubbling events jquery

17 ответов

если я понимаю, что вы хотите скрыть 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, о котором идет речь, это отменит событие click.

189

попробуй такое

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

  });
});
21

начиная с jQuery 1.7 существует новый способ обработки событий. Я подумал, что отвечу здесь, чтобы продемонстрировать, как я могу сделать это "новым" способом. Если у вас нет, я рекомендую вам прочитать jQuery docs для метода "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), а потому, что нам нужно сделать условные обозначения в обработчике, которые здесь неприменимы.

18

этот следующий пример кода, кажется, лучше всего подходит для меня. Хотя вы можете использовать "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>
13

то, что вы также можете сделать, это:

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

  var container = $("div");

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

   }

});

Если ваша цель не div, то скрыть div, проверив его длину равна нулю.

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

Дайте мне знать, если я могу помочь кому-то на это.

5

другой способ скрыть контейнер div, когда щелчок происходит в элементе not children;

$(document).on('click', function(e) {
    if(!$.contains($('.yourContainer').get(0), e.target)) {
        $('.yourContainer').hide();
    }
});
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, щелкнув в любом месте экрана. Прежде чем делать все, Пожалуйста, поймите код и скопируйте его...

3

попробуйте это, это работает идеально для меня.

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

2

вот рабочее решение CSS/small JS, основанное на ответе Sandeep Pal:

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

попробуйте, щелкнув флажок, а затем вне меню:

https://jsfiddle.net/qo90txr8/

2

попробуйте это:

$(document).mouseup(function (e) {
var div = $("your div");
if (!div.is(e.target) && div.has(e.target).length === 0) 
{
   div.hide();
 }
});
2

Это не работает-он скрывает .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>
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();
});
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>
1
$(document).mouseup(function (e)
{
    var mydiv = $('div#mydiv');
    if (!mydiv.is(e.target) && mydiv.has(e.target).length === 0){
       search.slideUp();
    }
});
0