Next.js应用中是否仍需使用带前缀的fullscreenchange事件监听器？

我在Next.js应用中添加全屏切换事件监听器时发现，现有示例代码都会同时使用webkit、moz、ms前缀的fullscreenchange事件变体，但我在Edge、Chrome、Firefox中测试后，仅使用标准的document.addEventListener('fullscreenchange', onFullScreenChange)就能正常工作，用W3Schools的测试代码验证也得到了一致结果。

需要验证的带前缀事件监听器代码：

document.addEventListener('mozfullscreenchange', onFullScreenChange);
document.addEventListener('webkitfullscreenchange', onFullScreenChange);
document.addEventListener('msfullscreenchange', onFullScreenChange);

结论：多数现代场景下无需添加带前缀的事件监听器 #

1. 现代浏览器已全面支持标准API #

目前Chrome（自版本71起）、Firefox（自版本64起）、Edge（基于Chromium的版本，自版本79起）都已完全支持标准的fullscreenchange事件，不再需要前缀。这些浏览器在触发全屏状态变化时，会直接触发标准事件，不会再单独触发带前缀的版本。

2. 带前缀API的适用场景 #

只有在需要兼容旧版本浏览器时才需要考虑添加前缀：

• Firefox 63及更早版本：需要监听mozfullscreenchange
• Chrome 70及更早版本、Safari 12.1及更早版本：需要监听webkitfullscreenchange
• IE11及旧版Edge（非Chromium内核）：需要监听msfullscreenchange

3. 测试结果符合当前浏览器现状 #

你用W3Schools的测试代码验证时，现代浏览器只会触发标准的fullscreenchange事件，说明这些浏览器已经完全实现了标准API，前缀版本的事件不会再被触发。

建议方案 #

• 如果你的Next.js应用仅面向现代浏览器（比如要求Chrome >=71、Firefox >=64、Edge >=79），完全可以只保留标准的fullscreenchange事件监听器，无需添加前缀版本。
• 如果需要兼容上述旧版本浏览器，可以保留前缀事件监听器，但建议做能力检测后再添加，避免冗余代码：

const onFullScreenChange = () => {
  // 你的全屏状态变化处理逻辑
};

// 添加标准事件监听器
document.addEventListener('fullscreenchange', onFullScreenChange);

// 按需添加前缀版本
if ('onmozfullscreenchange' in document) {
  document.addEventListener('mozfullscreenchange', onFullScreenChange);
}
if ('onwebkitfullscreenchange' in document) {
  document.addEventListener('webkitfullscreenchange', onFullScreenChange);
}
if ('onmsfullscreenchange' in document) {
  document.addEventListener('msfullscreenchange', onFullScreenChange);
}

内容的提问来源于stack exchange，提问作者Helder Batalha