Javascript 事件不会像我想的那样冒泡

我有一个动态生成的库存项目页面。我试图创建一个onclick事件，这样，如果用户单击显示的项目信息或图像，那么事件listner就会执行。我可以通过在HTML中添加onclick=“doSomething（this.id）使其工作，但无法使用我看到的任何事件冒泡和事件委派教程中的方法使其工作。 项目图像和数据显示在单独的HTML表格中，每个表格对应一个项目。每个表格都有一个唯一的id，它们都包含在一个容器div元素中。addEventListener被分配给div，而不是每个表格都有一个侦听器。 似乎正在发生的是img元素、td元素、tr或表格的点击事件触发器，如果我在点击表格元素之前非常小心地放置光标，那么无论我做什么，事件似乎都不会冒泡。我应该能够让它在每个连续的元素上触发，但有东西正在停止传播.
我需要在单击该表或任何子元素时检索（表的）唯一id

var theParent=document.querySelector（“#container”）；
家长添加的监听器（“点击”，doSomething）；
}
功能剂量测定法（e）{
console.log（e.target.id）+“\r\n”；
如果（e.target！==e.currentTarget）{
var clickedItem=e.target.nodeName；
console.log（单击编辑项）；
}
}

这是第1234项
...

我发现，如果我将同一个监听器添加到DOM树段中的每个元素，单击鼠标一次就会触发每个元素的单击事件，从单击的元素开始，向上移动到每个后续元素（冒泡）。然后我可以测试每个节点的“类名”项当发现时读取它的id。这会产生我想要的结果，但意味着数百个元素被分配给同一个侦听器。可能只有几百个指针，但我觉得不是很有效

但是，如果我只将侦听器添加到顶部元素，那么无论哪个元素实际收到了单击，单击事件都只会触发侦听器一次（例如，img，但不是它所在的td，或者td所在的tr，等等）。在正常情况下，这是一件好事，我看到了很多原因，但这并不能满足我的需要

考虑到这一点，我提出了以下解决方案。我将侦听器添加到顶部元素。然后，处理程序测试e.target是否具有“item”的类名，如果没有，它将遍历每个后续父级，直到找到具有类名“item”的节点，然后读取该节点的id（这是我正在查找的库存项目编号）

功能剂量仪（e）{
如果（e.target！==e.currentTarget）{
var el=e.target；
做{
el=el.parentNode；
}而（el.className！=“项”）；
var clickedItem=el.id；
日志（“单击的项目id:+clickedItem”）；
}
}
topofTree=document.querySelector（“#容器”）；
topofTree.addEventListener（“单击”，doSomething）

项目编号：0064
显示名称：精灵面具#8
说明：
类型：精灵面具
地点：画廊
幻灯片放映：否
尺寸：
价格：
评论：
“直接子体”-HTML中没有任何其他类型的子体。您的问题似乎是一个简单的语法错误。@昆汀说无法区分div#1234和img元素？我觉得很奇怪。他认为这不仅仅是“一个简单的语法错误”，这是一个他选择不启发任何人思考的秘密，重新测试它可能根本不是冒泡的问题，而是由于堆叠顺序，img和其他对象使div（或表格）一开始就看不到点击。如果是这样的话，我可以更改逻辑并告诉用户单击图像。或者我可以使用CSS指针事件来操纵点击的曝光。使用img方法可能更明智，但仍希望有人澄清或确认。仅仅因为我能让它工作，并不意味着它是正确的。”@quentin说没有办法区分div#1234和img元素？——我没有这么说。div是容器的子容器，图像是曾孙。他们都是直系后裔。