Why does a click event not reach the ?

Question

This slider is runnning in an animation loop unless one of the dots at the top is clicked. Then, the animated elements (the <span> dots and the <figure>s) get a style that stop 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'));
    });
};

After the animation is stopped, it should restart if something other than the dots is clicked (so that they loose focus). But on Firefox this works only if the click is outside of the #slider.

Clicking inside the currently shown <figure> lets it disappear - this is expected CSS behavior, since no dot has the 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 also tried to attach the event to the #slider, but the result is the same. It seems as if the event would not bubble past the <figure> elements, attaching it on those works, but is obviously a inferior solution.

Anyway I'd like to understand what happens to the event.

The event itself _does_ reach the `body` (you can confirm it by adding `console.log(e)` to the click handler), but `'.control:focus'` selects nothing because setting `tabindex` without value seems not enough to make non-interactive elements like `span`s focusable. With `tabindex=-1`, they become focusable and the click changes their behavior (also animation looks a bit strange after this change). — Ilya Streltsyn, Aug 14 '17 at 15:58
It seems the the tabindex number is needed for Chrome, on Firefox it can be left off. The problem I describe seems to be FF-specific. - What you call " a bit strange" is expected bevavior btw. — ccprog, Aug 14 '17 at 16:15

score 0 · Answer 1 · answered Aug 21 '17 at 17:10

It seems I fell into this trap: Blur event stops click event from working?

The moment the control looses focus, the slide is moved outside the visible area, and the click isn't hitting it. But it does not hit the background either; it really seems the click is actively canceled.

The solution is to couple the runing of the animation not with the click event, but with the focus/blur events.

Why does a click event not reach the ?

1 Answers1