javascript - Why does a click event not reach the <body>? -
this slider runnning in animation loop unless 1 of dots @ top clicked. then, animated elements (the <span>
dots , <figure>
s) style stop 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 animation stopped, should restart if other dots clicked (so loose focus). on firefox works if click outside of #slider
.
clicking inside shown <figure>
lets disappear - expected css behavior, since no dot has focus. animation not restart; first click
event not reach <body>
. second click triggers event listener.
i've tried attach event #slider
, result same. seems if event not bubble past <figure>
elements, attaching on works, inferior solution.
anyway i'd understand happens event.
it seems fell trap: blur event stops click event working?
the moment control looses focus, slide moved outside visible area, , click isn't hitting it. not hit background either; seems click actively canceled.
the solution couple runing of animation not click event, focus/blur events.
Comments
Post a Comment