Estoy tratando de recorrer 2 matrices simples de elementos y agregarles detectores de eventos 'clic'. Por alguna razón, cada elemento al que se agrega el detector de eventos se dispara 3 veces al hacer clic. La longitud de las matrices es correcta y el módulo js solo se sirve una vez.

El comportamiento previsto es activar la función una vez cuando se hace clic en una miniatura o título.

caja de luz.js

 export const lightbox = () => { const thumbnails = document.querySelectorAll('.video-lightbox-gallery .thumbnail-wrapper'); const titles = document.querySelectorAll('.video-lightbox-gallery .video-title'); console.log(thumbnails.length) // 3 console.log(titles.length) // 3 setClickEvents(thumbnails) setClickEvents(titles) function setClickEvents(arr) { arr.forEach(item => { item.addEventListener('click', function() { console.log('event fired') }) }) } }

principal.js

 document.addEventListener('DOMContentLoaded', () => { if (document.querySelector('.video-lightbox-gallery')) { import('./components/lightbox.js') .then(module => { module.lightbox() }) } })

video_lightbox_gallery.twig

 <div class="video-lightbox-gallery"> <div class="container"> <div class="grid"> {% for video in gallery.videos %} <div class="video-wrapper"> <div class="thumbnail-wrapper"> <div class="thumbnail" style="background-image: url('{{ Image(video.thumbnail).src }}');"></div> <svg class="play-btn" data-name="Group 414" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 76.378 76.378"><g data-name="Ellipse 1" fill="#fff" stroke="#fff" stroke-width="1.5"><circle cx="38.189" cy="38.189" r="38.189" stroke="none"/><circle cx="38.189" cy="38.189" r="37.439" fill="none"/></g><path data-name="Polygon 1" d="m52.098 38.19-19.18 11.107V27.082Z" fill="#538d9c"/></svg> </div> <span class="video-title">{{ video.title }}</span> </div> <div class="video-lightbox-template"> <iframe src="{{ video.link }}?autoplay=1" title="{{ video.title }}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> {% endfor %} </div> </div> </div>