Как скрыть элемент в событии щелчка в любом месте за пределами элемента?

121

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

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

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

jquery events event-bubbling

— Франек
источник

204

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

— Джереми Б.
источник

1

Это работает нормально ... но когда я нажимаю кнопку, которая вызывает всплывающее окно, всплывающее окно появляется, а затем сразу же исчезает. Что для этого делать, поскольку документ выполняет два действия одновременно. для вызова всплывающего окна при нажатии на тело и для исчезновения всплывающего окна при нажатии на bodyClick

— Вир Шривастав

@VeerShrivastav и здесь происходит то же самое. e.stopPropagation (); остановит все обработчики

— кликов

Это НЕ будет работать в Safari, если у вас есть другие элементы внутри .myDivelement. Например, если у вас есть раскрывающийся список выбора внутри .myDiv. Когда вы щелкаете по выбору, он будет думать, что вы нажимаете вне поля.

— CodeGodie

25

Попробуй это

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

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

  });
});

Я использую имя класса вместо идентификатора , потому что в asp.net вам нужно беспокоиться о дополнительных вещах. 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

  });
});

— TStamper
источник

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

— Бен Тейлор
источник

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>

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>

— Томми
источник

5

Вы также можете:

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

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

— foxybagga
источник

Отличный код и не выполняется, если div#newButtonDivне щелкнуть. Я бы порекомендовал вам удалить второй .click()в строке 4 (если вы это сделаете, не забудьте удалить закрывающие фигурные скобки, круглые скобки и точку с запятой в строке 9).

— aullah

4

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

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

— Налан Мадхесваран
источник

3

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

$(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 путем щелчка в любом месте экрана. Прежде чем что-то делать, пожалуйста, поймите код и скопируйте его ...

— Шейх Арбааз
источник

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

— Хасан Сардар
источник

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/

— Bjoerg
источник

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>

— Франек
источник

так что вы хотите, чтобы div показывал, когда ссылка размещена, затем возьмите этот e.stopPropa .. и следуйте моему варианту

— TStamper

1

Всего два небольших улучшения к приведенным выше предложениям:

отвяжите документ. нажмите, когда закончите

остановить распространение события, вызвавшего это, при условии, что это щелчок

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

— commonpike
источник

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>

Развернуть фрагмент

— Эхсан ХАН
источник

0

$( "element" ).focusout(function() {
    //your code on element
})

— Джафар Чупан
источник

5

Хотя этот код может решить вопрос, включение объяснения действительно помогает улучшить качество вашего сообщения.

— Шри

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>

— Nils
источник

-1

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

— Мохаммад Гитипасанд
источник

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

— Супер модель
источник