webentwicklung-frage-antwort-db.com.de

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

Ich möchte wissen, ob dies der richtige Weg ist, um sichtbare Elemente auszublenden, wenn irgendwo auf der Seite geklickt wird.

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

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

jqueryeventsevent-bubbling
114
Franek

Wenn ich verstehe, möchten Sie eine Div ausblenden, wenn Sie auf eine andere Stelle als die Div klicken, und wenn Sie auf die Div klicken, sollte sie NICHT geschlossen werden. Sie können das 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.

198
Jeremy B.

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 Klassenname anstelle von ID, weil Sie sich in asp.net Gedanken über das zusätzliche Zeug machen müssen, das .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

  });
});
23
TStamper

Ab jQuery 1.7 gibt es eine neue Möglichkeit, mit Ereignissen umzugehen. Ich dachte, ich würde hier nur antworten, um zu demonstrieren, wie ich das auf "neue" Weise machen könnte. Wenn nicht, empfehle ich Ihnen, die jQuery-Dokumentation 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 sicherstellen muss, dass ich den Ereignishandler anschließend bereinige. Sie können dieses Verhalten mit $('.container').one ( see: docs ) automatisieren, da wir jedoch Bedingungen innerhalb des Handlers ausführen müssen, die hier nicht zutreffen.

22
Ben Taylor

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

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

Ich habe jquery verwendet, um ein Login-Feld zu erstellen, das nach unten rutscht. Für die beste Benutzererfahrung habe ich beschlossen, die Box verschwinden zu lassen, wenn der Benutzer irgendwo anders klickt als auf die Box. Es ist mir ein bisschen peinlich, dass ich etwa 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>
6
Tommy

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 es sich bei Ihrem Ziel nicht um eine Div handelt, verbergen Sie die Div, indem Sie überprüfen, ob ihre Länge gleich Null ist.

5
Sandeep Pal

Ich habe das Folgende getan. Ich dachte daran, etwas zu teilen, damit auch jemand anderes davon profitieren kann.

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

5
foxybagga

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

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

Versuche dies:

 $(document).mouseup(function (e) {
    var div = $("#yourdivid");
    if (!div.is(e.target) && div.has(e.target).length === 0) 
    {
       div.hide();
     }
    });
3
Nalan Madheswaran
  $(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 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 auf dem Bildschirm klicken. Bevor Sie alles tun, verstehen Sie bitte den Code und kopieren Sie ihn ...

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

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

aber Sie müssen auch diese Dinge im Auge behalten. http://css-tricks.com/dangers-stopping-event-propagation/

2
Muhammad Tahir

Probieren Sie es aus, 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();
    }
});
2
Hassan Sardar

Hier ist eine funktionierende CSS/kleine 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 und dann außerhalb des Menüs klicken:

https://jsfiddle.net/qo90txr8/

2
Bjoerg

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>
1
Franek
$(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>
1
Ehsan KHAN

Nur 2 kleine Verbesserungen zu den obigen Vorschlägen:

  • binden Sie das Dokument ab. Klicken Sie auf, wenn Sie fertig sind

  • beenden Sie die Weitergabe für das Ereignis, das dies ausgelöst hat, vorausgesetzt, es ist ein 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();
});
1
commonpike
$(document).mouseup(function (e)
{
    var mydiv = $('div#mydiv');
    if (!mydiv.is(e.target) && mydiv.has(e.target).length === 0){
       search.slideUp();
    }
});
0
mohammad gitipasand
$( "element" ).focusout(function() {
    //your code on element
})
0
Jafar Choupan