Jugar con los z-index y position

[madman_18]

Buenos días a todos!

Tengo que plantearos una duda:

Mi página va a llevar un div (flotante a la izquierda) que dentro va a llevar una imagen, un título y unos datos y al hacer click en él va a mostrar unas fichas para mostrar más detalles, y dentro de él va a llevar un div oculto el cual va a mostrarse cuando se ponga el puntero encima y que llevará un botón que me realizará algunas acciones.

Ahora bien, ¿cómo puedo hacer para que al pulsar sobre el botón de la capa oculta no me realice la acción que tengo asociada al clic del div que lo contiene? He probado añadiendo los z-index y demás pero nada de nada....

El código, para que os hagáis una idea sería:

Código HTML:

<div class="contenedor" onclick="alert('acciona el click en el contenedor');">
<img src='algunsitio.jpg'/>
<div class="capaoculta">
<div class="boton" onclick="alert('acciona el click del boton');"></div>
</div>
</div>
 

El problema: cuando hago click en el "boton" me saca el alert('acciona el click en el contenedor') y alert('acciona el click del boton') cuando tendría que sacarme únicamente el alert('acciona el click del boton')

[ryugen]

Tu problema no es con el z-index ni con CSS.

Sino que el evento click se está propagando en el árbol de elementos y accionando el click del contenedor.

Para evitarlo tienes que cancelar la propagación

Código HTML:

<div class="contenedor" onclick="alert('acciona el click en el contenedor');">
    <img src='algunsitio.jpg'/>
    <div class="capaoculta">
    <div id="boton" class="boton">contenido boton</div>
    </div>
    </div>
 

Código Javascript:

document.getElementById("boton").onclick = function(e) {
    alert('acciona el click del boton');
    if(e && e.stopPropagation) 
    {
        e.stopPropagation();
    } 
    else
    {
          e = window.event;
          e.cancelBubble = true;
    }
}
 

Acá tienes un jsFiddle con el código funcionando

[madman_18]

Iniciado por ryugen

Tu problema no es con el z-index ni con CSS.

Sino que el evento click se está propagando en el árbol de elementos y accionando el click del contenedor.

Para evitarlo tienes que cancelar la propagación

Código HTML:

<div class="contenedor" onclick="alert('acciona el click en el contenedor');">
    <img src='algunsitio.jpg'/>
    <div class="capaoculta">
    <div id="boton" class="boton">contenido boton</div>
    </div>
    </div>
 

Código Javascript:

document.getElementById("boton").onclick = function(e) {
    alert('acciona el click del boton');
    if(e && e.stopPropagation) 
    {
        e.stopPropagation();
    } 
    else
    {
          e = window.event;
          e.cancelBubble = true;
    }
}
 

Acá tienes un jsFiddle con el código funcionando

Perdón entonces ;) pensé que con alguna ayuda de css podría cambiarlo... habría que meter el post en javascript entonces ;)

Sólo comentarte....en el resultado que me comentas al final, me saca siempre el botón y no el alert del contenedor, ¿es correcto?