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

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

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

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

Ответ 1

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

Ответ 2

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

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

  });
});

Ответ 3

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

Ответ 4

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

Ответ 5

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

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

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

Сообщите мне, могу ли я помочь кому-то в этом.

Ответ 7

Что вы также можете сделать:

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

  var container = $("div");

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

   }

});

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

Ответ 8

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

$(document).on('click', function(e) {
    if(!$.contains($('.yourContainer').get(0), e.target)) {
        $('.yourContainer').hide();
    }
});

Ответ 9

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

Ответ 10

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

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

Ответ 11

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

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

Ответ 12

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

Ответ 13

Вот работающее решение 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/

Ответ 14

Это не работает - он скрывает .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>

Ответ 15

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

отменить привязку документа document.click

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

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

Ответ 16

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

Ответ 17

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

Ответ 18

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

Ответ 19

Простое решение: скрыть элемент в событии щелчка в любом месте за пределами определенного элемента.

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