为什么点击事件没有达到<body>？

这个slider正在一个动画循环中运行，除非点击顶部的一个点。然后，动画元素（<span>点和<figure>）会获得停止动画的样式。为什么点击事件没有达到<body>？

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

后，如果其他的东西比点被点击的时候，应该重新启动（让他们松焦点）。但是，在火狐上的仅当点击超出#slider时才有效。

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

我也尝试附加事件到#slider，但结果是一样的。看起来好像事件不会冒泡过去的元素，附加在这些作品上，但显然是一种劣质的解决方案。

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

来源

2017-08-14 ccprog

事件本身_does_到达'body'（你可以通过在click处理程序中添加'console.log（e）'来确认它），但是''.control：focus''没有选择任何东西，因为没有设置tabindex'价值似乎不足以使诸如“span”这样的非交互式元素成为可聚焦的。使用'tabindex = -1'，它们变得可以聚焦，并且点击改变它们的行为（在这个改变之后动画看起来有点奇怪）。 –

Chrome浏览器似乎需要tabindex编号，在Firefox上它可以被忽略。我描述的问题似乎是FF特定的。 - 你称之为“有点奇怪”的预期行为顺便说一句。 – ccprog

我好像掉进这个陷阱：Blur event stops click event from working?

控制失去焦点的时刻，滑板移动可视区域之外，并且点击时不打它。但它也没有触及背景;它确实似乎点击被主动取消。

解决方案是将动画的运行与单击事件相结合，但与焦点/模糊事件相结合。

来源

2017-08-21 17:10:37 ccprog

为什么点击事件没有达到<body>？

回答

相关问题