Detect if I'm clicking an element within an element

问题

I have an element (let's say div with id "Test") with a set height and width. Randomly placed within this element are other (smaller) elements (let's say id's "inner1","inner2","inner3"), but there is also whitespace, space where no elements are. I would like to have a function that fires upon clicking the main element, but then detect wether i'm clicking whitespace, or if not, clicking an inner element and if so, return the id of the inner element.

Oh and the inner elements are dynamically generated so i don't know the id's before hand, i do know they are either div's or spans... (just as example as well, but i will have multiple types of elements).

Thanks everyone.

EDIT: (since thank you Xotic750 for reminding me to post what i mean :))

I haven't tried much since i have no idea how to call detect an inner click through the javascript..

but here is an example:

<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/

回答1:

I think this is what you mean?

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>

回答2:

Add an onClick handler to your Test div and use event bubbling to trap clicks on the inner elements. You can extract the clicked element from the event object.

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

}

来源：https://stackoverflow.com/questions/17157342/detect-if-im-clicking-an-element-within-an-element

标签

javascript

onmousedown