Question

所以我遇到了这个奇怪的问题，我不知道我是否公然缺少了一些东西。访问this页（或任何中型文章）。打开控制台并注入以下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进行委派的一种理论：新创建的元素在创建时将不会位于body中，稍后将其移至DOM树中的位置。因此，委派无法通过body找到它，但是可以通过document捕获它。

在进一步研究并注入了以下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之外的其他地方找到点击事件。我认为委派不会在最初的DOM结构上起作用，因为这样做会破坏目的。

如果它是重复的，也请告诉我，因为我真的不知道要精确搜索什么。

Answer 1

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

我已经成功了

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

Answer 2

图像（您要定位）是动态制作的。单击图像后，应该可以将其定位。

Answer 3

document.querySelectorAll('.progressiveMedia-image.js-progressiveMedia-image')

这将在DOM中查询同时具有类progressiveMedia-image和js-progressiveMedia-image的所有元素。您遍历结果并将事件侦听器绑定到每个元素的click事件。

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

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

3 个答案: