Rileva se clicco su un elemento all'interno di un elemento

Question

Ho un elemento (diciamo div con id "Test") con altezza e larghezza impostate. Posizionati casualmente all'interno di questo elemento ci sono altri (più piccoli) elementi (diciamo id "inner1", "inner2", "inner3"), ma c'è anche spazio bianco, spazio in cui non ci sono elementi. Mi piacerebbe avere una funzione che si attiva dopo aver fatto clic sull'elemento principale, ma poi rilevare se sto facendo clic su uno spazio bianco o, in caso contrario, facendo clic su un elemento interno e, in tal caso, restituire l'id dell'elemento interno.

Oh e gli elementi interni sono generati dinamicamente quindi non conosco l'id prima della mano, so che sono div o span ... (anche come esempio, ma avrò più tipi di elementi).

Grazie a tutti.

EDIT: (dal momento grazie Xotic750 per avermi ricordato di inviare quello che voglio dire :))

Non ho provato molto in quanto non ho idea di come chiamare rilevare un click interno attraverso il javascript ..

ma qui è un esempio:

<div id="test"> 
    <div id="inner1"></div> 
    <span id="inner2"></span> 
    <div id="inner3"></div> 
</div> 
<style> 
div#test { 
    width:300px; 
    height:400px; 
    position:relative; 
    display:block; 
    border:1px solid blue; 
} 
div#test div, div#test span { 
    display:block; 
    position:absolute; 
    border:1px solid red; 
} 
div#inner1 { 
    top:15px; 
    left:15px; 
    height:15px; 
    width:15px; 
} 
span#inner2 { 
    top:65px; 
    left:65px; 
    height:15px; 
    width:15px; 
} 
div#inner3 { 
    top:155px; 
    left:155px; 
    height:15px; 
    width:15px; 
} 
</style> 

http://jsfiddle.net/BgbRy/2/

Answer 1

Penso che questo sia quello che vuoi dire?

var test = document.getElementById('test'); 
 

 
function whatClicked(evt) { 
 
    alert(evt.target.id); 
 
} 
 

 
test.addEventListener("click", whatClicked, false);

div#test { 
 
    width: 300px; 
 
    height: 200px; 
 
    position: relative; 
 
    display: block; 
 
    border: 1px solid blue; 
 
} 
 

 
div#test div, 
 
div#test span { 
 
    display: block; 
 
    position: absolute; 
 
    border: 1px solid red; 
 
} 
 

 
div#inner1 { 
 
    top: 15px; 
 
    left: 15px; 
 
    height: 15px; 
 
    width: 15px; 
 
} 
 

 
span#inner2 { 
 
    top: 65px; 
 
    left: 65px; 
 
    height: 15px; 
 
    width: 15px; 
 
} 
 

 
div#inner3 { 
 
    top: 155px; 
 
    left: 155px; 
 
    height: 15px; 
 
    width: 15px; 
 
}

<div id="test"> 
 
    <div id="inner1"></div> 
 
    <span id="inner2"></span> 
 
    <div id="inner3"></div> 
 
</div>

Answer 2

Aggiungi un onClick gestore per il tuo div prova e l'uso di bubbling degli eventi ai clic intrappolare sugli elementi interni. È possibile estrarre l'elemento cliccato dall'oggetto evento.

document.getElementById("Test").onclick = function(e) { 
    e = e || event 
var target = e.target || e.srcElement 
// variable target has your clicked element 
    innerId = target.id; 
    // do your stuff here. 
    alert("Clicked!"); 

}