Wie verstecke ich ein Element in einem Klickereignis außerhalb des Elements?

121

Ich würde gerne wissen, ob dies die richtige Art ist, sichtbare Elemente auszublenden, wenn Sie irgendwo auf der Seite klicken.

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

Das Element (div, span usw.) sollte nicht verschwinden, wenn ein Klickereignis innerhalb der Grenzen des Elements auftritt.

jquery events event-bubbling Franek
quelle

204

Wenn ich das verstehe, möchten Sie ein Div ausblenden, wenn Sie auf eine andere Stelle als das Div klicken. Wenn Sie über das Div klicken, sollte es NICHT geschlossen werden. Sie können dies mit diesem Code tun:

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

Dadurch wird der Klick an die gesamte Seite gebunden. Wenn Sie jedoch auf das betreffende Div klicken, wird das Klickereignis abgebrochen.

Jeremy B.
quelle

1

Das funktioniert gut. Aber wenn ich auf die Schaltfläche klicke, die das Popup aufruft, kommt das Popup und verschwindet sofort wieder. Was Sie dafür tun müssen, da das Dokument zwei Aktionen gleichzeitig ausführt. um das Popup auf body click aufzurufen und das Popup auf bodyClick

Veer Shrivastav

@VeerShrivastav dasselbe passiert hier. e.stopPropagation (); stoppt alle Klick-Handler

Brunodd

Dies funktioniert in Safari NICHT, wenn Sie andere Elemente im .myDivElement haben. Zum Beispiel, wenn Sie ein ausgewähltes Dropdown-Menü haben .myDiv. Wenn Sie auf die Auswahl klicken, denken Sie, dass Sie außerhalb des Rahmens klicken.

CodeGodie

24

Versuche dies

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

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

  });
});

Ich verwende den Klassennamen anstelle der ID , da Sie sich in asp.net um die zusätzlichen Dinge kümmern müssen, die .net an die ID anfügt

EDIT- Da Sie ein weiteres Stück hinzugefügt haben, würde es so funktionieren:

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

22

Ab jQuery 1.7 gibt es eine neue Möglichkeit, Ereignisse zu behandeln. Ich dachte, ich würde hier nur antworten, um zu demonstrieren, wie ich dies auf "neue" Weise tun könnte. Wenn nicht, empfehle ich Ihnen, die jQuery-Dokumente für die "on" -Methode zu lesen .

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

Hier missbrauchen wir die Selektoren von jQuery und sprudeln vor Ereignissen. Beachten Sie, dass ich den Ereignishandler anschließend bereinige. Sie können dieses Verhalten mit $('.container').one( siehe: docs ) automatisieren, aber da wir im Handler Bedingungen erfüllen müssen, die hier nicht anwendbar sind.

Ben Taylor
quelle

13

Das folgende Codebeispiel scheint für mich am besten zu funktionieren. Während Sie 'return false' verwenden können, wird die gesamte Behandlung dieses Ereignisses für das div oder eines seiner untergeordneten Elemente gestoppt. Wenn Sie Steuerelemente für das Popup-Div haben möchten (z. B. ein Popup-Anmeldeformular), müssen Sie event.stopPropogation () verwenden.

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

quelle

6

Danke, Thomas. Ich bin neu bei JS und habe verrückt nach einer Lösung für mein Problem gesucht. Ihre hat geholfen.

Ich habe jquery verwendet, um ein Login-Feld zu erstellen, das nach unten rutscht. Für eine optimale Benutzererfahrung habe ich beschlossen, die Box verschwinden zu lassen, wenn der Benutzer auf eine andere Stelle als die Box klickt. Es ist mir ein bisschen peinlich, dass ich ungefähr vier Stunden gebraucht habe, um das zu beheben. Aber hey, ich bin neu bei JS.

Vielleicht kann mein Code jemandem helfen:

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

5

Was Sie auch tun können, ist:

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

  var container = $("div");

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

   }

});

Wenn Ihr Ziel kein Div ist, verbergen Sie das Div, indem Sie überprüfen, ob seine Länge gleich Null ist.

Sandeep Pal
quelle

5

Ich habe das Folgende getan. Ich dachte daran zu teilen, damit auch jemand anderes davon profitieren könnte.

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

Lassen Sie mich wissen, ob ich jemandem dabei helfen kann.

Foxybagga
quelle

Großartiger Code und wird nicht ausgeführt, wenn div#newButtonDivnicht darauf geklickt wird. Ich würde empfehlen, dass Sie die zweite .click()in Zeile 4 entfernen (wenn Sie dies tun, denken Sie daran, die schließenden Klammern, Klammern und das Semikolon - Zeile 9 zu entfernen).

Aullah

4

Versuche dies:

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

Nalan Madheswaran
quelle

3

Eine andere Möglichkeit, das Container-Div auszublenden, wenn ein Klick in einem nicht untergeordneten Element erfolgt.

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

Renato Gama
quelle

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

Hier ist #suggest_input in der Name des Textfelds und .suggest_container ist der Name der ul-Klasse und .suggest_div ist das Haupt-Div-Element für meinen automatischen Vorschlag.

Dieser Code dient zum Ausblenden der div-Elemente, indem Sie auf eine beliebige Stelle im Bildschirm klicken. Bevor Sie alles tun, verstehen Sie bitte den Code und kopieren Sie ihn ...

Shaikh Arbaaz
quelle

2

Versuchen Sie dies, es funktioniert perfekt für mich.

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

2

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

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

Aber Sie müssen auch diese Dinge berücksichtigen. http://css-tricks.com/dangers-stopping-event-propagation/

Muhammad Tahir
quelle

2

Hier ist eine funktionierende CSS / Small JS-Lösung, die auf der Antwort von Sandeep Pal basiert:

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

Probieren Sie es aus, indem Sie auf das Kontrollkästchen klicken und dann außerhalb des Menüs:

https://jsfiddle.net/qo90txr8/

Bjoerg
quelle

1

Dies funktioniert nicht - es verbirgt die .myDIV, wenn Sie darauf klicken.

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

Sie möchten also, dass das Div angezeigt wird, um zu zeigen, wann der Link platziert ist. Nehmen Sie dann das e.stopPropa .. und folgen Sie meiner Option

TStamper

1

Nur 2 kleine Verbesserungen an den obigen Vorschlägen:

Binden Sie das Dokument. Klicken Sie auf, wenn Sie fertig sind

Stoppen Sie die Weitergabe des Ereignisses, das dies ausgelöst hat, vorausgesetzt, es handelt sich um einen Klick

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
quelle

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>

Erweitern Sie das Snippet

Ehsan KHAN
quelle

0

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

Jafar Choupan
quelle

5

Während dieser Code die Frage lösen kann, hilft das Hinzufügen einer Erklärung wirklich, die Qualität Ihres Beitrags zu verbessern.

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
quelle

-1

Einfache Lösung: Verstecken Sie ein Element in einem Klickereignis außerhalb eines bestimmten Elements.

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

Supermodel
quelle

Wie verstecke ich ein Element in einem Klickereignis außerhalb des Elements?

Antworten: