我有这个 HTML(示例):
<div class="a">
<div class="b">
<img src="...">
<p>text</p>
</div>
<div class="b">
<img src="...">
<p>text</p>
</div>
<div class="b">
<img src="...">
<p>text</p>
</div>
</div>
我有大约 1000 个 div.b
。我需要将事件监听器添加到 div.a
并定位 div.b
子项。
但是,event.target
也可能是 img
或 p
:
document.querySelector('.a').addEventListener('click', handler);
function handler(e){
console.log(e.target); //either .b or img or p depending on where I click
}
我需要这样的东西(jQuery):
$('.a').on('click', '.b', function(){
//code
});
最佳答案
您可以像在 CSS 文件中一样扩展查询选择器,以选择类的子级。
以下代码在单击 SO 上的搜索栏时进行了测试。你可以在控制台上尝试一下
document.querySelector('.top-bar .f-input').addEventListener('click', function(e){
console.log(e)
})
关于Javascript 事件委托(delegate)问题与目标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46418461/