检测我是否在一个元素内点击了另一个元素

Question

我有一个固定高度和宽度的元素（假设id为“Test”的div），在这个元素中随机放置了其他较小的元素（假设id为“inner1”、“inner2”、“inner3”），但也存在空白处，也就是没有任何元素的空间。我希望单击主元素时触发一个函数，检测我是否点击了空白处，如果没有，则检测我是否点击了内部元素，如果是，则返回内部元素的id。

还有，内部元素是动态生成的，因此我事先不知道它们的id，但我知道它们可能是div或span等多种类型的元素。

谢谢大家。

编辑：（感谢 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/

- Tobias Hagenbeek

---

你目前尝试了什么？你有任何可以提供作为示例的HTML和CSS吗？ - Xotic750

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>

- Xotic750

---

正是我所需要的！非常感谢！！ - Tobias Hagenbeek

Answer 2

在您的Test div上添加一个onClick处理程序，并使用事件冒泡来捕获内部元素上的点击。您可以从事件对象中提取被点击的元素。

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

}

- user1864610

---

虽然我没有得到ID，但是DOM对象也可以工作，只是需要更多步骤来获取我需要的内容。还是谢谢！ - Tobias Hagenbeek

这基本上与Xotic的答案相同，只是通过稍微不同的方式得出。我添加了一行额外的代码来提取ID。 - user1864610