如何在Vue组件中检测浏览器全屏状态切换？监听事件未触发排查

看起来你遇到的问题主要有两个核心点：方法调用错误和浏览器兼容性未处理，咱们一步步来修复：

1. 先修正方法调用的问题 #

你的currentDatetime是一个方法，但在logFullScreen里你直接写了this.currentDatetime，这会把函数本身打印出来而不是执行它获取时间。必须加上括号调用：this.currentDatetime()。

2. 处理全屏事件的浏览器兼容性 #

不同浏览器对全屏事件有不同的前缀，只监听标准的fullscreenchange可能在Chrome、Firefox等浏览器里不生效，需要同时监听带前缀的事件：

• webkitfullscreenchange（Chrome、Safari）
• mozfullscreenchange（Firefox）
• msfullscreenchange（IE/Edge旧版）

修正后的完整代码 #

<script>
export default {
    mounted() {
        // 监听所有兼容的全屏切换事件
        const fullscreenEvents = [
            'fullscreenchange',
            'webkitfullscreenchange',
            'mozfullscreenchange',
            'msfullscreenchange'
        ];
        
        fullscreenEvents.forEach(event => {
            document.addEventListener(event, this.logFullScreen);
        });
        
        console.log("Mounted");
    },
    methods: {
        currentDatetime() {
            const today = new Date();
            // 格式化日期为两位数格式，避免出现2024-5-6这种不规范格式
            const date = `${today.getFullYear()}-${String(today.getMonth()+1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
            // 格式化时间为两位数格式
            const time = `${String(today.getHours()).padStart(2, '0')}:${String(today.getMinutes()).padStart(2, '0')}:${String(today.getSeconds()).padStart(2, '0')}`;
            return `${date} ${time}`;
        },
        logFullScreen() {
            // 兼容不同浏览器的全屏元素判断属性
            const fullscreenElement = document.fullscreenElement || 
                                      document.webkitFullscreenElement || 
                                      document.mozFullScreenElement || 
                                      document.msFullscreenElement;
            
            if(fullscreenElement) {
                console.log(`Changed to fullscreen at ${this.currentDatetime()}`);
            } else {
                console.log(`Exited fullscreen at ${this.currentDatetime()}`);
            }
        }
    },
    destroyed() {
        // 移除所有添加的事件监听器，避免内存泄漏
        const fullscreenEvents = [
            'fullscreenchange',
            'webkitfullscreenchange',
            'mozfullscreenchange',
            'msfullscreenchange'
        ];
        
        fullscreenEvents.forEach(event => {
            document.removeEventListener(event, this.logFullScreen);
        });
    }
}
</script>

额外优化说明 #

• 我给日期和时间加了padStart(2, '0')，确保月份、日期、时分秒都是两位数的规范格式，提升日志可读性。
• 同时兼容了不同浏览器的fullscreenElement属性，确保判断全屏状态的逻辑在所有主流浏览器里都能正常工作。

现在你再测试一下，不管是通过浏览器自带的全屏功能（比如F11键）还是页面内的元素触发全屏，事件应该都能正常触发并打印日志了。

内容的提问来源于stack exchange，提问作者Apoorv Pal