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

Question

So I came across this weird issue and I don't know if I'm blatantly missing something. Visit this page (or any medium article). Open console and inject the following JS code.

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

Now click on the big images, expected behaviour should be (please correct me cause I seem to be wrong) that the target element is printed when you click on it the first time and also the second time. But as it turns out when you click on the image (zoomed) the second time (to zoom out) it doesn't print the target in the console.

I thought that there might be some overlay element and hence I bind the event on body to capture all of the events using the following injected JS.

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

But even with that I only get one console print of the target.

One theory for delegation using body not working might be following - The newly created element would not be in the body in its time of creation, it will be moved to its place in the DOM tree later on. And hence delegation is not able to find it when did via body but able to capture it via document .

After a bit more exploring and injecting the following JS (taken from here and I know break point can be added, I did do that earlier but to no end so resorted to this.)

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
});

I don't see any element being added to the DOM on click (it is being added on load) so that theory might not be correct. So I guess now the real question is why Event Capturing through document is able to find the click event where else not from body . I don't think delegation works on initial DOM structure since it would break the purpose.

Also if it is a duplicate please let me know, since I don't really know what to exactly search for.

Answer 1

probably because there is something in front of the zoomed image that intercepts the click event in capture mode and stops propagation.

I've got success with this

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

Answer 2

The image (you are trying to target) is dynamically made. After you already clicked the image once you should be able to target it.

Answer 3

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

This queries the DOM for all elements that have both the class progressiveMedia-image and js-progressiveMedia-image . You iterate over the result and bind an event listener to the click event of each element.

When you do click on one of the images, the JavaScript that is already running in the page creates new elements and displays them. These new elements might have the same classes, but did not exist originally when you searched the DOM. As such, they do not have their click event bound.