0
このsliderは、上のドットの1つがクリックされない限り、アニメーションループで実行されます。次に、アニメーション要素（<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'));
});
};
、それが再起動する必要があります。しかしFirefoxの場合これは、クリックが#sliderの外にある場合にのみ機能します。
現在表示されている<figure>の内部をクリックすると消えます。ドットにフォーカスがないため、これはCSSの動作として期待されます。しかし、アニメーションは再開しません。最初のclickイベントは<body>に届きません。 2回目のクリックだけがイベントリスナをトリガします。
私はまた、#sliderにイベントを添付しようとしましたが、結果は同じです。あたかもイベントが<figure>要素を超えてバブリングしないように見えますが、それはそれらの作品に付いていますが、明らかに劣っています。
とにかく、イベントに何が起こったのか理解したいと思います。
イベント自体は 'body'に届きます（クリックハンドラに' console.log（e） 'を追加することで確認できます）。' '.control：focus''は' tabindex'を設定せずに何も選択しません'span'のような非インタラクティブな要素をフォーカス可能にするには十分ではないようです。 'tabindex = -1'では、フォーカスを得ることができ、クリックはその動作を変更します（アニメーションもこの変更の後にちょっと変わって見えます）。 –
Chromeの場合はtabindex番号が必要ですが、Firefoxの場合は中止することができます。私が記述した問題は、FF特有のものと思われる。あなたが「ちょっと奇妙な」と呼んでいるのは、bevavior btwです。 – ccprog