JQuery скрыть элемент при нажатии в любом месте на странице - PullRequest
Новая
       68

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

114 голосов
/ 03 апреля 2009

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

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

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

Ответы [ 18 ]

198 голосов
/ 03 апреля 2009

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

23 голосов
/ 03 апреля 2009

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

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

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

  });
});

Я использую имя класса вместо идентификатора , потому что в asp.net вам нужно беспокоиться о дополнительных вещах .net присоединяет к идентификатору

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 голосов
/ 30 мая 2012

Начиная с 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 ), но потому, что нам нужно выполнить условия в обработчике, который здесь не применим.

13 голосов
/ 17 июля 2009

Этот следующий пример кода, кажется, работает лучше всего для меня. В то время как вы можете использовать '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>
6 голосов
/ 21 апреля 2010

Спасибо, Томас. Я новичок в 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>
5 голосов
/ 11 мая 2013

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

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

  var container = $("div");

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

   }

});

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

5 голосов
/ 21 мая 2012

Я сделал ниже. Мысль о том, чтобы поделиться, чтобы кто-то еще мог также извлечь выгоду. 

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

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

3 голосов
/ 17 сентября 2014

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

$(document).on('click', function(e) {
    if(!$.contains($('.yourContainer').get(0), e.target)) {
        $('.yourContainer').hide();
    }
});
3 голосов
/ 28 мая 2015 
  $(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 голосов
/ 16 августа 2015

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

 $(document).mouseup(function (e) {
    var div = $("#yourdivid");
    if (!div.is(e.target) && div.has(e.target).length === 0) 
    {
       div.hide();
     }
    });
Страница:
...