Ich habe folgendes div:

<div id="welcome-lightbox">
   <div id="content"></div>
</div>

Ich möchte das Div ausblenden, wenn der Benutzer irgendwo im Div auf klickt. Ich dachte, der eleganteste Weg, dies zu tun, wäre stopPropagation (http://api.jquery.com/event) .stopPropagation /)

$(document).click(function(){
  $('#welcome-lightbox').hide();
  $('#welcome-lightbox-box').click(function(event){
    event.stopPropagation();
  });
});

Dieser Ansatz scheint jedoch nicht zu funktionieren. Das Div versteckt sich immer noch, wenn es angeklickt wird. Irgendwelche Ideen?

1
alias51 6 Dez. 2013 im 21:06

5 Antworten

Beste Antwort

Fügen Sie dem Dokument einen Klick-Handler hinzu und überprüfen Sie mithilfe von next (), ob der Klick aus dem Element stammt:

$(document).on('click', function(e){
    if (! $(e.target).closest('#welcome-lightbox').length )
        $('#welcome-lightbox').hide();
});

Wenn Sie die ID event.target überprüfen, wird der Leuchtkasten geschlossen, wenn auf ein anderes Element im Leuchtkasten als den Leuchtkasten selbst geklickt wird.

2
adeneo 6 Dez. 2013 im 17:15

Dies liegt daran, dass Sie das Ereignis erst nach dem ersten Klicken auf das Dokument registrieren und es ausgeblendet wird. Verschieben Sie daher Ihre Stop-Propagation-Ereignisregistrierung für das bestimmte Element außerhalb des Klick-Handlers des Dokuments.

Versuchen:

$(document).click(function(){
  $('#welcome-lightbox').hide();

});
$(function(){
  $('#welcome-lightbox').click(function(event){ //Also your selector may be wrong?
    event.stopPropagation();
  });
});

Demo

Oder Sie könnten einfach tun:

$(document).click(function(e){
    if(e.target.id !== 'welcome-lightbox' )
        $('#welcome-lightbox').hide();
});
4
PSL 6 Dez. 2013 im 17:08

Fügen Sie einen Ereignishandler über dem Element hinzu und überprüfen Sie dann target, um festzustellen, ob auf div geklickt wurde.

$(document).click(function(e){
    var divId = "welcome-lightbox";
    if(e.target.id != divId){
        $("#" + divId).hide();
    }
});

JS Fiddle: http://jsfiddle.net/rG3AC/

2
Kevin Bowersox 6 Dez. 2013 im 17:12

Sie können dies tun, indem Sie eine 2-Ebenen-Anwendung erstellen, die äußere Teilung, die sich wie eine Überlagerung über den gesamten Bildschirm erstreckt, und dann Ihre innere Teilung. Haben Sie ein Klickereignis auf dem inneren Div, das die Ereignisausbreitung stoppt, aber dann ein Klickereignis auf dem äußeren Div, das sich selbst schließt oder verbirgt.

0
Nemesis02 6 Dez. 2013 im 17:09
<div id="welcome-lightbox"></div>

var lightbox = document.querySelector('#welcome-lightbox');

document.addEventListener('click',function(e) {
  if(e.id != lightbox.id) {
    lightbox.style.visibility = 'hidden';
  }
},false);
1
divyaSharma 6 Dez. 2013 im 17:12