Problema con eventos

[NachE]

hola, tengo un problema de eventos en javascript. La cuestion es que tengo dos capas, una dentro de la otra, con el mismo evento y que llaman a la misma funcion.

Me explico con codigo:

Código HTML:

<div id="padre" style="border: 1px solid #000000; width: 352px; height: 268px;" OnClick="cargar('padre')">

<div id="hijo" style="border: 1px solid #ff0000; width: 200px; height: 200px;" OnClick="cargar('hijo')"></div>

</div> 

Mi problema es que si pincho en la capa id="hijo" el evento que se crea es el de id="padre". El evento OnClick="cargar('hijo')" nunca llega a crearse (o quizas lo sobreescriba el padre, no lo se). Necesito diferenciar cuando pincho en el padre y cuando en el hijo.

Gracias de antemano y todo eso al que se digne a hecharme una manita :)

[ZiTAL]

al padre:

Código HTML:

style="border: 1px solid #000000; width: 352px; height: 268px; z-index:0;"

al hijo:

Código HTML:

style="border: 1px solid #ff0000; width: 200px; height: 200px; z-index:1;"

cuanto mayor sea el z-index mas adelante tenemos la capa, y asi al hacer click en el hijo no te hara la del padre.

Esa es la teoria, ahora prueba en la practica ;)