Erkennen, wenn ich auf ein Element innerhalb eines Elements klicke

Question

Ich habe ein Element (sagen wir Div mit ID "Test") mit einer festgelegten Höhe und Breite. Zufällig in diesem Element platziert sind andere (kleinere) Elemente (sagen wir IDs "inner1", "inner2", "inner3"), aber es gibt auch Leerzeichen, Leerzeichen, wo keine Elemente sind. Ich möchte eine Funktion, die beim Klicken auf das Hauptelement ausgelöst wird, aber dann erkennen, ob ich Whitespace klicke, oder wenn nicht, klicken Sie auf ein inneres Element und wenn ja, geben Sie die ID des inneren Elements zurück.

Oh, und die inneren Elemente werden dynamisch erzeugt, so dass ich die IDs vorher nicht kenne, ich weiß, dass sie entweder Divs oder Spannen sind ... (nur als Beispiel, aber ich werde mehrere Arten von Elementen haben).

Danke an alle.

EDIT: (seit danke Xotic750 mich für die Erinnerung zu schreiben, was ich meine :))

Ich habe nicht viel ausprobiert, da ich keine Ahnung, wie nennen einen inneren Klick durch die Javascript erkennen ..

aber hier ist ein Beispiel:

<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

ich denke, das ist, was du meinst?

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

einen onClick Handler Ihre Test-div hinzufügen und Ereignis verwenden, um auf die inneren Elemente zu stoppen Klicks sprudeln. Sie können das angeklickte Element aus dem Ereignisobjekt extrahieren.

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

}