首屏轮播每五秒自动换一张,鼠标移上去会停,键盘用户把焦点移进去照样继续翻,想看完第三张的说明文字根本来不及,读完已经被换走了。日志里能对上时间点,这种反而好排。
暂停只绑了 mouseenter 和 mouseleave,键盘焦点进入不会触发。页面上也没有独立的暂停按钮,自动播放对读屏和键盘用户就成了无法打断的干扰。这一点先确认清楚,后面就不用反复试。
<button id='pause' aria-pressed='false'>暂停轮播</button>
<div class='slider' role='region' aria-label='推荐内容'>…</div>
<script>slider.addEventListener('focusin', stop)</script>
「轮播暂停控制」排查到最后往往是很小的一处差异,前面那些复杂猜测可以先放一放。线上出问题先对时间点,跟发布、备份、任务执行的时刻排一排,能省掉一半功夫。
处理上按这个顺序:在轮播旁边放一个可见的暂停按钮,文案写暂停轮播,别只放一个图标;给容器同时监听 focusin 和 focusout,焦点进入就停,离开再恢复;用户手动暂停后记住这个状态,下一轮不要再自动跑起来。
结果对不对很好判断,用 Tab 把焦点移进轮播,画面停住不动,按暂停按钮后焦点移出也不再自动切换。
