This slider runs in an animation loop until one of the dots at the top is clicked. Once clicked, the animated elements (the <span> dots and the <figure>s) receive a style that halts the animation.
<section id="slider">
<span class="control" tabindex="1"></span>
<span class="control" tabindex="2"></span>
<span class="control" tabindex="3"></span>
<figure class="slide">
<!--Image 1--->
</figure>
<figure class="slide">
<!--Image 2--->
</figure>
<figure class="slide">
<!--Image 3--->
</section>
Script:
window.onload = function () {
var slider = document.querySelector('#slider');
var animated = slider.querySelectorAll('.control, .slide');
function switchAll (focus) {
animated.forEach(function (el) {
el.style['animation-name'] = focus ? 'none' : null;
});
}
document.querySelector('body').addEventListener('click', function (e) {
switchAll(slider.querySelector('.control:focus'));
});
};
Once the animation stops, it should restart if something other than the dots is clicked (losing focus). However, on Firefox, this only works if the click occurs outside of the #slider.
If you click inside the currently displayed <figure>, it disappears - which is the expected CSS behavior since no dot has focus. But the animation does not restart; the first click event does not reach the <body>. Only a second click triggers the event listener.
I've tried attaching the event to the #slider, but the result remains the same. It seems like the event does not bubble past the <figure> elements. Attaching it to those elements works, but is not the optimal solution.
In any case, I would like to understand what happens to the event.