javascript 检测我是否点击了一个元素中的一个元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17157342/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Detect if I'm clicking an element within an element
提问by Tobias Hagenbeek
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.
我有一个设置了高度和宽度的元素（比方说 ID 为“Test”的 div）。随机放置在此元素中的是其他（较小的）元素（假设 id 为“inner1”、“inner2”、“inner3”），但也有空白，没有元素的空间。我想要一个在单击主元素时触发的函数，然后检测我是单击空白，还是单击内部元素，如果是，则返回内部元素的 id。
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).
哦，内部元素是动态生成的，所以我事先不知道 id，我确实知道它们是 div 或跨度......（就像例子一样，但我会有多种类型的元素）。
Thanks everyone.
感谢大家。
EDIT: (since thank you Xotic750 for reminding me to post what i mean :))
编辑：（因为感谢 Xotic750 提醒我发布我的意思:)）
I haven't tried much since i have no idea how to call detect an inner click through the javascript..
我没有尝试太多，因为我不知道如何通过 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>
回答by Xotic750
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>回答by Tobias Hagenbeek
Add an onClickhandler 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.
将onClick处理程序添加到您的测试 div 并使用事件冒泡来捕获对内部元素的点击。您可以从事件对象中提取单击的元素。
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!");
}
