Estoy trabajando en un proyecto de Shopify y no soy el desarrollador original, que no está disponible, junto con una versión no minimizada del archivo javascript incluido en cada página.

El sitio original tiene una página que muestra una cuadrícula de fotografías de los empleados. Se me encargó mejorar haciendo que cada foto de rostro tenga una superposición que muestre información adicional y que al hacer clic en la imagen de la foto de rostro O en la superposición (y su contenido) se realice alguna acción adicional.

Cada elemento de la cuadrícula (primer plano) se ve esencialmente así:

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

y mi detector/controlador de eventos se ve así:

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

Todo funciona como se esperaba.

Al hacer clic en cualquier lugar dentro del elemento de cuadrícula, console.log es la imagen A MENOS que haga clic en cualquier lugar de la superposición, en cuyo caso, console.log es el contenedor de superposición. Esto es lo que necesito.

Sin embargo, cuando agrego esto a la plantilla real de Shopify (en la que se incluye este archivo JavaScript global), obtengo resultados diferentes.

Al hacer clic en cualquier lugar dentro del elemento de la cuadrícula, console.log es la imagen A MENOS que haga clic en cualquier lugar de la superposición, en cuyo caso, console.log es NADA.

Lo único que puedo concluir es que algo en el archivo JavaScript global está cancelando el evento de clic en <img> , por lo que nunca llega a la superposición. ¿Es este el caso? Si es así, ¿hay alguna forma de saber dónde está sucediendo esto y posiblemente anularlo con mi nuevo script? Y si no, ¿alguna idea de por qué los clics en la superposición pueden no registrarse en la Tienda real en lugar de mi prototipo básico, que se puede ver en este Codepen ?