Probleme mit schießen eiges DIV Layers per onclick

[BananaJo]

ich habe probleme mit dem schließen eines einfachen DIV Layers.
Und zwar soll dieser sich schließen, wenn man außerhalb des angezeigten Inhalts klickt.. eigentlich genau so, wie bei der Bildanzeige von Facebook oder Pinterest.

Leider schiließt sich der Layer auch, wenn ich auf den eigentlichen Inhalt klicke.

Mit z-index gehts leider nicht .. hat jemand eine Lösung?

Das ist der Layer:

function hideImageView()
{
    document.getElementById("imageview").style.display = "none";
    document.getElementById("imageview_box").style.display = "none";
    
    document.documentElement.style.overflow = 'visible';     // firefox, chrome
    document.body.scroll = "yes"; //ie    
}

#imageview{
z-index: 10000;
margin:30px;
margin-left:auto;
margin-right:auto;
display:none;
overflow-x: none;
overflow-y: none;
-webkit-perspective: 1000;
width:630px;
background-color:white; 
moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
box-shadow: 0 1px 6px rgba(34,25,25,0.4);
-moz-box-shadow: 0 1px 4px rgba(34,25,25,0.4);
-webkit-box-shadow: 0 1px 6px rgba(34,25,25,0.4);
}


#imageview_box{
position: fixed;
z-index: 9999;
top: 0;
right: 0;
bottom: 0;
left: 0;
display:none;
overflow-x: auto;
overflow-y: scroll;
-webkit-perspective: 1000;
background:transparent;
background-image:url("http://localhost/pin/images/layer/bg.png");
}


<div id="imageview_box" onclick="hideImageView()">
    <div id="imageview">
        Inhalt des Layers... wenn hier geklickt wird, darf der layer nicht schließen!            
    </div>    
</div> 

[AmicaNoctis]

Hallo,

dann gib dem Bereich, in dem ein Klick kein Schließen bewirken soll, einen eigenen onclick-Handler, in dem du cancelBubble auf true setzt und — sofern vorhanden — stopPropagation() aufrufst.

Alternativ kannst du auch in der existierenden Funktion prüfen, ob

this === (theEvent.srcElement || theEvent.originalTarget)

wahr ist und nur dann das Layer schließen.

Gruß,

Amica

[wahsaga]

Target des Events abfragen, und entsprechend reagieren.

Oder, auf den inneren Div auch einen click-Handler setzen, der das Bubbling des Events nach oben im DOM unterbindet.

[AmicaNoctis]

Zwei absolut übereinstimmende Meinungen, das muss jetzt einfach klappen

[BananaJo]

Danke erstmal!!

ich hab das nun so gelöst, allerdings scheint es nicht immer zu funktionieren.. mal gehts, mal nicht... weiß jemand woran das liegt??

function hideImageView()
{

    $("#imageview").click(function(event){
      event.stopPropagation();
    });

    document.getElementById("imageview").style.display = "none";
    document.getElementById("imageview_box").style.display = "none";
    
    document.documentElement.style.overflow = 'visible';     // firefox, chrome
    document.body.scroll = "yes"; //ie    
} 

[AmicaNoctis]

Du gehst die ganze Eventbehandlung falsch an. Am besten nimmst du keine onclick-Attribute (obwohl es damit auch gehen würde, wenn man es richtig macht), sondern registrierst die Events über JavaScript am Element und zwar nicht erst beim Klicken, sondern onload:

elem.onclick = function (pEvent) {
    var target;
    pEvent = pEvent || window.event;
    target = pEvent.originalTarget || pEvent.srcElement;

    // mach was mit target

};

[BananaJo]

habs jetzt so gemacht.. und es funzt soweit

function hideImageView()
{

    $("#imageview").click(function(event){
      event.stopPropagation();
    });
    
    $("#imageview_box").click(function(event){
          document.getElementById("imageview").style.display = "none";
        document.getElementById("imageview_box").style.display = "none";
        
        document.documentElement.style.overflow = 'visible';     // firefox, chrome
        document.body.scroll = "yes"; //ie    
    });    
} 

[AmicaNoctis]

habs jetzt so gemacht.. und es funzt soweit

Aber erst beim zweiten Klick. Der erste registriert nur die Eventhandler.

[BananaJo]

@AmicaNoctis danke schonmal.. du hast recht mit dem zweiten klick und versuche das grade zu lösen.. leider verstehe ich dein unteres beispiel nicht ganz und kann das für mein beispiel nicht umsetzen...

wofür stehen denn die variablen?

pEvent = pEvent || window.event;
target = pEvent.originalTarget || pEvent.srcElement; 

elem.onclick = function (pEvent) {
var target;
pEvent = pEvent || window.event;
target = pEvent.originalTarget || pEvent.srcElement;

// mach was mit target

};

[AmicaNoctis]

pEvent steht für das Eventobjekt und unterstützt sowohl Browser, die es als Argument übergeben bekommen (z. B. Firefox) und solche, bei denen es global bereitgestellt wird (z. B. IE).

Target ist das Element, welches den Event ursprünglich ausgelöst hat und wird auch browserübergreifend befüllt (IE: srcElement; normale Browser: originalTarget).