javascript - 单击事件绑定(bind)的奇怪行为；事件未触发

Question

所以我遇到了这个奇怪的问题，我不知道我是否公然遗漏了一些东西。访问this页面(或任何媒体文章)。打开控制台并注入(inject)以下JS代码。

for (const elem of document.querySelectorAll('.progressiveMedia-image.js-progressiveMedia-image')) {
    elem.addEventListener('click', function () { 
        console.log(event.target);
    });
} 

现在单击大图像，预期的行为应该是(请纠正我，因为我似乎是错的)，当您第一次和第二次单击目标元素时，都会打印目标元素。但事实证明，当您第二次单击图像(缩放)(缩小)时，它不会在控制台中打印目标。

我认为可能存在一些覆盖元素，因此我将事件绑定(bind)在 body 上，以使用以下注入(inject)的 JS 捕获所有事件。

document.body.addEventListener('click', function () {
    console.log(event.target);
}, true);

但即便如此，我也只能得到目标的一份控制台打印结果。

使用 body 的委托(delegate)不起作用的一种理论可能如下 - 新创建的元素在创建时不会位于 body 中，稍后它将被移动到 DOM 树中的位置。因此，委托(delegate)在通过 body 找到它时无法找到它，但能够通过 document 捕获它。

经过更多探索并注入(inject)以下 JS(取自 here 并且我知道可以添加断点，我之前确实这样做过，但没有结果，所以才采取这种做法。)

var observer = new MutationObserver(function (mutationsList, observer) {
  for (var mutation of mutationsList) {
    if (mutation.type == 'childList') {
      console.log('A child node has been added or removed.');
    }
    else if (mutation.type == 'attributes') {
      console.log('The ' + mutation.attributeName + ' attribute was modified.');
    }
  }
});
observer.observe(document, {
  attributes: true,
  childList: true,
  subtree: true
});

我没有看到任何元素在点击时添加到 DOM(它是在加载时添加的)，因此理论可能不正确。所以我想现在真正的问题是为什么通过 document 进行事件捕获能够找到点击事件，而不是从 body 中找到。我认为委托(delegate)在初始 DOM 结构上不起作用，因为它会破坏目的。

此外，如果重复，请告诉我，因为我真的不知道到底要搜索什么。

Answer 1

可能是因为缩放图像前面有东西拦截了捕获模式下的点击事件并停止传播。

我已经成功了

document.addEventListener("click", function(e){ console.log(e.target); }, true);