原因:fullscreenchange事件会在进入全屏和退出全屏时各触发一次。所以全屏切换期间会触发两次该事件。
解决方案:
js
Copy code
- 在监听fullscreenchange事件时,使用变量进行防抖处理。比如设置一个变量来记录上一次的全屏状态,只有当状态真正发生改变时才执行处理逻辑。
fullScreen(e) { let lastFullscreen = false; const isFullscreen = e.detail.fullScreen console.log('lastFullscreen:', lastFullscreen, isFullscreen) if (isFullscreen !== lastFullscreen && lastFullscreen == true) { // 状态改变,执行处理逻辑 if (!isFullscreen) { lastFullscreen = false; console.log('lastFullscreen:', lastFullscreen, isFullscreen) this.videoContext.requestFullScreen(); } else { lastFullscreen = true; console.log('lastFullscreen:', lastFullscreen, isFullscreen) this.videoContext.exitFullScreen(); } } },
- 使用setTimeout及清除定时器的方式防抖,只在fullscreen状态稳定后的一次事件中处理。
- 在微任务队列中处理事件回调,这样可以合并连续的fullscreenchange事件。
- 根据全屏切换的场景,通过代码直接控制只监听必要的全屏事件。比如只在视频全屏时才监听。