Javascript 点击事件绑定的怪异行为;事件未触发

Javascript 点击事件绑定的怪异行为;事件未触发,javascript,html,debugging,Javascript,Html,Debugging,所以我遇到了这个奇怪的问题,我不知道我是否明显遗漏了什么。访问第页(或任何媒体文章)。打开控制台并注入以下JS代码 for (const elem of document.querySelectorAll('.progressiveMedia-image.js-progressiveMedia-image')) { elem.addEventListener('click', function () { console.log(event.target); })

所以我遇到了这个奇怪的问题,我不知道我是否明显遗漏了什么。访问第页(或任何媒体文章)。打开控制台并注入以下JS代码

for (const elem of document.querySelectorAll('.progressiveMedia-image.js-progressiveMedia-image')) {
    elem.addEventListener('click', function () { 
        console.log(event.target);
    });
} 
现在单击大图像,预期的行为应该是(请纠正我,因为我似乎错了),当您第一次和第二次单击目标元素时,目标元素将被打印。但是,当你第二次点击图像(放大)时(缩小),它不会在控制台中打印目标

我认为可能有一些覆盖元素,因此我在
body
上绑定事件,以使用以下注入的JS捕获所有事件

document.body.addEventListener('click', function () {
    console.log(event.target);
}, true);
但即使这样,我也只能得到目标的一个控制台打印

使用
body
不工作的委托的一个理论可能如下- 新创建的元素在创建时不会出现在
主体中,稍后将移动到DOM树中的位置。因此,当通过
body
执行委托时,委托无法找到它,但可以通过
文档
捕获它。

在进一步探索和注入以下JS之后(取自,我知道可以添加断点,我之前做过,但没有结束,所以求助于此。)

我没有看到任何元素在单击时添加到DOM(它是在加载时添加的),因此理论可能不正确。所以我想现在真正的问题是,为什么通过
文档
捕获的事件能够在
正文
以外的地方找到单击事件。我认为委托不适用于初始DOM结构,因为它会破坏目的


另外,如果它是重复的,请让我知道,因为我真的不知道到底要搜索什么。

图像(您正在尝试定位)是动态生成的。单击图像后,您应该能够将其定位。

可能是因为缩放图像前面有某种东西在捕获模式下拦截单击事件并停止传播

我成功地做到了这一点

document.addEventListener("click", function(e){ console.log(e.target); }, true);
这将查询DOM中同时具有类
progressiveMedia image
js progressiveMedia image
的所有元素。对结果进行迭代,并将事件侦听器绑定到每个元素的
click
事件


当您单击其中一个图像时,页面中已经运行的JavaScript将创建新元素并显示它们。这些新元素可能具有相同的类,但在搜索DOM时,它们最初并不存在。因此,他们的
点击
事件没有绑定。

你能添加到页面的链接吗?@user20完成,很抱歉耽搁了。我完全错过了,感觉像个傻瓜。但我确实使用了不起作用的主体委派了事件。我确实使用了不起作用的主体委派了事件。有什么线索吗?好的,我认为带body的委托不起作用,因为新创建的元素还不在body中,它稍后会被移动。因此,当委托人通过机构找到它时,委托人无法找到它。
document.addEventListener("click", function(e){ console.log(e.target); }, true);
document.querySelectorAll('.progressiveMedia-image.js-progressiveMedia-image')