检测我是否单击元素中的元素

Question

我有一个元素(让我们说div与id"Test")具有设定的高度和宽度.随机放置在这个元素中的是其他(较小的)元素(比如id的"inner1","inner2","inner3"),但也有空格,没有元素的空间.我希望有一个函数在单击主元素时触发,但是然后检测到我是否点击了空格,或者如果没有,则单击内部元素,如果是,则返回内部元素的id.

哦,内部元素是动态生成的,所以我不知道手的id,我知道它们要么是div还是跨度......(仅作为示例,但我会有多种类型的元素).

感谢大家.

编辑:(感谢Xotic750提醒我发布我的意思:))

我没有尝试太多,因为我不知道如何通过javascript调用检测内部点击..

但这是一个例子:

<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

我想这就是你的意思？

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>