Question

除非点击顶部的一个点，否则此slider将在动画循环中运行。然后，动画元素（<span>点和<figure> s）获得一个停止动画的样式。

<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>

脚本：

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'));
    });
};

动画停止后，如果点击了点以外的其他内容（这样它们会失去焦点），它应该重新启动。但是Firefox上的仅当点击超出#slider时才有效。

单击当前显示的<figure>内部使其消失 - 这是预期的CSS行为，因为没有点具有焦点。但是动画没有重启;第一个click事件未到达<body>。只需第二次单击即可触发事件侦听器。

我还尝试将事件附加到#slider，但结果是一样的。似乎事件不会冒泡过<figure>元素，将其附加到这些工作上，但显然是一个较差的解决方案。

无论如何，我想了解事件会发生什么。

Answer 1

我似乎陷入了这个陷阱：Blur event stops click event from working?

控件失去焦点的那一刻，幻灯片移动到可见区域之外，并且点击没有击中它。但它也没有触及背景;它似乎真的被取消了。

解决方案是将动画的运行与点击事件结合起来，而不是与焦点/模糊事件结合。

为什么点击事件无法到达？

1 个答案: