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

Question

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

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

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

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

17 111

jquery events event-bubbling

17 ответов:

попробуй такое
 $('.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

EDIT - Поскольку вы добавили еще один кусок, он будет работать следующим образом:
 $('.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

Спасибо, Томас. Я новичок в 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>

6

то, что вы также можете сделать, это:
$(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

Jeremy B. · Accepted Answer · 2012-02-27 16:09:37

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