Wykrywanie kliknięcia elementu w elemencie

Question

Mam element (powiedzmy div z identyfikatorem "Test") z ustawioną wysokością i szerokością. Losowo umieszczone w tym elemencie są inne (mniejsze) elementy (powiedzmy id "inner1", "inner2", "inner3"), ale jest też biały znak, przestrzeń, w której nie ma żadnych elementów. Chciałbym mieć funkcję, która uruchamia się po kliknięciu głównego elementu, ale następnie wykrywa, czy klikam biały znak, lub jeśli nie, kliknięcie elementu wewnętrznego, a jeśli tak, zwróć identyfikator elementu wewnętrznego.

Aha i wewnętrzne elementy są generowane dynamicznie, więc nie znam identyfikatora przed ręką, wiem, że są one div lub przęsła ... (tak samo jak przykład, ale będę miał wiele rodzajów elementów).

Dziękuję wszystkim.

EDIT: (od Xotic750 dziękuję za przypomnienie mi odpowiedzieć co mi chodzi :))

nie próbowałem wiele, ponieważ nie mam pojęcia jak zadzwonić wykryć wewnętrzną click through javascript ..

ale tutaj jest przykład:

<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

myślę, że to jest to, co masz na myśli?

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

Dodaj onClick obsługi do div testować i używać zdarzenie propagacji do kliknięcia pułapki na elementach wewnętrznych. Możesz wyodrębnić element kliknięty z obiektu zdarzenia.

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!"); 

}