I'm working on a Shopify project and am not the original developer, who is unavailable, along with an un-minified version of the javascript file included on every page.

The original site has a page displaying a grid of employee headshots. I have been tasked with enhancing by making it such that each headshot has an overlay that displays some additional info and that clicking on either the headshot image OR the overlay (and its contents) will take some additional action.

Each grid item (headshot) essentially looks like this:

<div class="wrap">
  <img src="PATH_TO_IMG">
  <div class="info">Danny Testeroni</div>
</div>

and my event listener/handler looks like this:

const $item = document.querySelector('.wrap');
$item.addEventListener('click', (e) => {
  console.log(e.target);
});

All works as expected.

Clicking anywhere within the grid item, console.logs the image UNLESS you click anywhere on the overlay, in which case, it console.logs the overlay container. This is what I need.

However when I add this to the actual Shopify template (in which this global JavaScript file gets included), i get different results.

Clicking anywhere within the grid item, console.logs the image UNLESS you click anywhere on the overlay, in which case, it console.logs NOTHING.

The only thing I can conclude is that something in the global JavaScript file is canceling the click event at the <img> so it never makes it to the overlay. Is this the case? If so, is there any way to tell where this is happening and possibly overriding it with my new script? And if not, any ideas why clicks on the overlay may not be registering in the actual Shop as opposed to my bare bones prototype, which can be seen in this Codepen?