Blenden Sie ein div aus, wenn Sie außerhalb davon klicken

Diese Frage wurde gebeten, mehrmals, aber keine der Antworten scheint zu funktionieren für mich.

Dem css der div ist wie folgt:

#info{
  display: none;
  position: fixed;
  z-index: 500;
  height: 50%;
  width: 60%;
  overflow: auto;
  background: rgba(187, 187, 187, .8);
}

Habe ich versucht den folgenden code verwenden:

$("#info").click(function(e){
  e.stopPropagation();
});

$(document).click(function(){
  $("#info").hide();
});

sowie diesen code:

$(document).mouseup(function (e){
    var container = $("#info");

    if (container.has(e.target).length === 0) {
        container.hide();
    }
});

Aber jedesmal, wenn ich auf der div verschwindet es auch, keine Ahnung warum, aber es funktioniert.

Irgend etwas anderes, das funktionieren könnte?

InformationsquelleAutor der Frage Gooey | 2012-07-18

  1. 31

    Als Ziel hat id=infoso können Sie versuchen:

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

  //check that your clicked
  //element has no id=info

  if( e.target.id != 'info') {
    $("#info").hide();
  }
});

    Können Sie auch versuchen:

    $(document).click(function() {

  if( this.id != 'info') {
    $("#info").hide();
  }

});

    Laut Kommentar

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

    //check that your clicked
    //element has no id=info
    //and is not child of info
    if (e.target.id != 'info' && !$('#info').find(e.target).length) {
        $("#info").hide();
    }
});

    InformationsquelleAutor der Antwort thecodeparadox

  2. 4

    Befestigen onclick event-handler, um die document Objekt:

    $(document).click(function(e) {   
    if(e.target.id != 'info') {
        $("#info").hide();   
    } 
});

    Demo: http://jsfiddle.net/aUjRG/

    Hier ist eine Lösung in reinem JavaScript, um Ihnen helfen, besser zu verstehen, was es passiert:

    function hideInfo(){
    if(window.event.srcElement.id != 'info'){
        document.getElementById('info').style.display = 'none';
    }
}

document.onclick = hideInfo;

    Demo: http://jsfiddle.net/mmzc8/

    Beide Lösungen prüfen Sie, ob der Speicherort, auf den der Benutzer geklickt hat, wurde auf das element mit der ID info. Vorausgesetzt, dass der Benutzer nicht auf den info element, dann verstecken Sie die info element.

    InformationsquelleAutor der Antwort RobB

  3. 3

    Zu gewährleisten, haben Sie eine Lösung, die funktioniert auf iPads zu, dann müssen Sie die folgende Funktion auslösen, anstatt:

    $(document).on("mousedown touchstart",function(e){
  var $info = $('#info');
  if (!$info.is(e.target) && $info.has(e.target).length === 0) {
    $info.hide();
  }
});

    Ähnlich, wenn Sie schauen, um Abdeckung mouseup -, fügen 'touchend':

    $(document).on("mouseup touchend",function(e){
  ...
});

    InformationsquelleAutor der Antwort Andy Lorenz

  4. 3

    Versuchen, diesen code, das ist das beste für mich.

    jQuery('.button_show_container').click(function(e) {
    jQuery('.container').slideToggle('fast'); 
    e.stopPropagation();
});

jQuery(document).click(function() {
        jQuery('.container').slideUp('fast');
});

    InformationsquelleAutor der Antwort Ken Avila

  5. 0

    Können Sie eine Klasse nur für überprüfen Sie auf die Maus klicken, die bestimmte div-oder alle innerhalb dieses div-element geklickt wird oder nicht. 

    $(document).click(function(e){            
    if ( !$(e.target).hasClass("[class name for check]") &&
         $("[element class or id]").css("display")=="block" ) {
            //...code if clicked out side div
    }
});

    InformationsquelleAutor der Antwort Ahmad.Iftikhar

  6. -1

    Versuchen, die unterhalb Lösung. Es ist auch arbeitet rekursiv:

    $(document).mouseup(function(e) 
{
    var container = $("YOUR CONTAINER SELECTOR");

    //if the target of the click isn't the container nor a descendant of the container
    if (!container.is(e.target) && container.has(e.target).length === 0) 
    {
        container.hide();
    }
});

    Referenz - https://stackoverflow.com/a/7385673/3910232

    InformationsquelleAutor der Antwort Sam G

Schreibe einen Kommentar