Jak ukryć element zdarzenia click w dowolnym miejscu poza elementem?

121

Chciałbym wiedzieć, czy jest to właściwy sposób ukrycia widocznych elementów po kliknięciu w dowolnym miejscu strony.

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

Element (div, span itp.) Nie powinien znikać, gdy zdarzenie kliknięcia nastąpi w granicach elementu.

jquery events event-bubbling Franek
źródło

204

Jeśli rozumiem, chcesz ukryć element div, gdy klikniesz gdziekolwiek poza elementem div, a jeśli klikniesz nad elementem div, NIE powinien się on zamykać. Możesz to zrobić za pomocą tego kodu:

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

Spowoduje to powiązanie kliknięcia z całą stroną, ale jeśli klikniesz dany element div, anuluje zdarzenie kliknięcia.

Jeremy B.
źródło

1

To działa dobrze ... ale kiedy klikam przycisk wywołujący wyskakujące okienko, pojawia się wyskakujące okienko, a następnie natychmiast znika. Co z tym zrobić, ponieważ dokument wykonuje jednocześnie dwie czynności. aby wywołać wyskakujące okienko w ciele, kliknij i zamknijOtwórz wyskakujące okienko w bodyClick

Veer Shrivastav

@VeerShrivastav to samo dzieje się tutaj. e.stopPropagation (); zatrzyma wszystkie

programy

To NIE zadziała w Safari, jeśli masz inne elementy wewnątrz .myDivelementu. Na przykład, jeśli masz w środku menu wyboru .myDiv. Po kliknięciu zaznaczenia pomyśli, że klikasz poza polem.

CodeGodie

24

Spróbuj tego

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

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

  });
});

Używam nazwy klasy zamiast identyfikatora , ponieważ w asp.net musisz się martwić o dodatkowe rzeczy .net dołączane do identyfikatora

EDYCJA - Ponieważ dodałeś kolejny element, będzie działać tak:

 $('.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
źródło

22

Od jQuery 1.7 istnieje nowy sposób obsługi zdarzeń. Pomyślałem, że odpowiem tutaj tylko po to, aby zademonstrować, jak mogę to zrobić w „nowy” sposób. Jeśli nie, polecam przeczytanie dokumentacji jQuery dla metody „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);

Tutaj nadużywamy selektorów jQuery i bulgotanie wydarzeń. Zauważ, że upewniam się, że później wyczyściłem procedurę obsługi zdarzeń. Możesz zautomatyzować to zachowanie za pomocą $('.container').one( zobacz: docs ), ale ponieważ musimy zrobić warunki warunkowe w module obsługi, które nie mają tutaj zastosowania.

Ben Taylor
źródło

14

Poniższy przykład kodu wydaje się działać najlepiej dla mnie. Chociaż możesz użyć „return false”, które zatrzyma całą obsługę tego zdarzenia dla elementu div lub któregokolwiek z jego elementów podrzędnych. Jeśli chcesz mieć kontrolki na pop-up div (na przykład wyskakujący formularz logowania), musisz użyć 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>

źródło

6

Dzięki, Thomas. Jestem nowy w JS i szalenie szukałem rozwiązania mojego problemu. Twoja pomogła.

Użyłem jquery, aby utworzyć okno logowania, które przesuwa się w dół. Aby uzyskać najlepsze wrażenia użytkownika, postanowiłem, że pudełko zniknie, gdy użytkownik kliknie gdzieś poza pudełkiem. Jestem trochę zażenowany, że poświęcam około czterech godzin na naprawienie tego. Ale hej, jestem nowy w JS.

Może mój kod może komuś pomóc:

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

Tommy
źródło

5

Możesz też:

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

  var container = $("div");

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

   }

});

Jeśli celem nie jest element DIV, ukryj go, sprawdzając, czy jego długość jest równa zero.

Sandeep Pal
źródło

5

Zrobiłem poniżej. Myśl o dzieleniu się, aby ktoś inny również mógł skorzystać.

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

Daj mi znać, jeśli mogę komuś w tej sprawie pomóc.

foxybagga
źródło

Świetny kod i nie jest wykonywany, jeśli div#newButtonDivnie zostanie kliknięty. Radziłbym usunąć drugi .click()z linii 4 (jeśli to zrobisz, pamiętaj, aby usunąć nawiasy zamykające, nawiasy i średnik - wiersz 9).

aullah

4

Spróbuj tego:

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

Nalan Madheswaran
źródło

3

Inny sposób na ukrycie elementu div kontenera, gdy nastąpi kliknięcie w elemencie niebędącym potomkiem;

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

Renato Gama
źródło

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

Tutaj #suggest_input in to nazwa pola tekstowego, a .suggest_container to nazwa klasy ul, a .suggest_div jest głównym elementem div dla mojej autosugestii.

ten kod służy do ukrywania elementów div przez kliknięcie dowolnego miejsca na ekranie. Zanim cokolwiek zrobisz, zapoznaj się z kodem i skopiuj go ...

Shaikh Arbaaz
źródło

2

Spróbuj tego, działa idealnie dla mnie.

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

Hassan Sardar
źródło

2

$('html').click(function() {
//Hide the menus if it is visible
});

$('#menu_container').click(function(event){
    event.stopPropagation();
});

ale musisz też o tym pamiętać. http://css-tricks.com/dangers-stopping-event-propagation/

Muhammad Tahir
źródło

2

Oto działające rozwiązanie CSS / small JS oparte na odpowiedzi Sandeep Pal:

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

Wypróbuj, klikając pole wyboru, a następnie poza menu:

https://jsfiddle.net/qo90txr8/

Bjoerg
źródło

1

To nie działa - ukrywa .myDIV po kliknięciu w nim.

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

Franek
źródło

więc chcesz, aby element DIV był wyświetlany, aby pokazać, kiedy link zostanie umieszczony, a następnie weź to e.stopPropa .. stamtąd i postępuj zgodnie z moją opcją

TStamper

1

Tylko 2 małe ulepszenia powyższych sugestii:

rozpakuj dokument. kliknij po zakończeniu

zatrzymać propagację w zdarzeniu, które to wywołało, zakładając, że jest to kliknięcie

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

pospolity
źródło

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>

Rozwiń fragment

Ehsan KHAN
źródło

0

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

Jafar Choupan
źródło

5

Chociaż ten kod może rozwiązać problem, dołączenie wyjaśnienia naprawdę pomaga poprawić jakość twojego postu.

Shree

-1

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

mohammad gitipasand
źródło

-1

Proste rozwiązanie: ukryj element zdarzenia kliknięcia w dowolnym miejscu poza określonym elementem.

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

Super Model
źródło

Jak ukryć element zdarzenia click w dowolnym miejscu poza elementem?

Odpowiedzi: