La especificación MDN del método closest dice que el método atraviesa el DOM hacia arriba, en dirección a la raíz del documento. Pero, ¿qué método se necesita usar en mi caso en lugar del closest entonces?

En mi página HTML tengo el siguiente código:

 <div class="slider__steps"> <span></span> <span></span> <span class="slider__step-active"></span> <span></span> <span></span> </div>

En mi archivo JS, quiero capturar el elemento de span más cercano a un clic del mouse y cambiar su clase CSS. Intento hacer esto de la siguiente manera:

 moveSlider(elem) { let sliderSteps = elem.querySelector('.slider__steps'); let spans = sliderSteps.querySelectorAll('span'); elem.addEventListener('click', moveThumb); function moveThumb(event) { for (let span of spans) { span.classList.remove('slider__step-active'); } event.target.closest('span').classList.add('slider__step-active'); } }

pero el error que me sale es

TypeError no detectado: event.target.closest(...) es nulo

¿Cómo se capturan realmente estos lapsos con los clics del mouse?