js 页面全屏后 点击事件不生效

在JavaScript中，当你通过全屏API将页面设置为全屏模式后，可能会遇到点击事件不生效的问题。这可能是由于全屏状态下的某些默认行为或者样式的变化导致的。为了解决这个问题，你可以尝试以下几个步骤：

1. 确保全屏元素正确设置：在调用全屏API时，确保正确设置了全屏元素。通常情况下，如果你是全屏整个文档，那么应该监听`fullscreenchange`事件而不是`webkitfullscreenchange`事件（如果浏览器是基于WebKit内核的）。

2. 检查元素的CSS属性：全屏模式下可能会有一些默认的CSS样式应用，比如`pointer-events`可能被设置为`none`。检查并确保你的点击元素没有被CSS样式干扰。

3. 阻止默认行为：在全屏模式下，某些元素可能触发了默认的行为，这可能会阻止事件冒泡或者默认的事件处理。确保在事件处理函数中使用`e.preventDefault()`来阻止默认行为。

4. 确保事件监听器正确绑定：在元素进入全屏之前就绑定事件监听器，因为如果在全屏之后绑定监听器，事件可能不会被正确捕捉。

示例代码可能如下：

function toggleFullScreen() {
    if (!document.fullscreenElement) {
        // 全屏整个文档
        document.documentElement.requestFullscreen().catch(err => {
            alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
        });
    } else {
        // 退出全屏模式
        document.exitFullscreen();
    }
}

document.addEventListener('fullscreenchange', function() {
    if (!document.fullscreenElement) {
        // 全屏模式退出后执行的代码
        console.log("退出全屏");
    } else {
        // 全屏模式下执行的代码
        console.log("进入全屏");
        // 绑定事件到全屏元素
        var fullscreenElement = document.fullscreenElement;
        fullscreenElement.addEventListener('click', function(e) {
            // 阻止默认行为
            e.preventDefault();
            // 你的点击处理逻辑
            console.log('点击事件已触发');
        });
    }
});

// 调用函数以切换全屏状态
toggleFullScreen();