0

我有一个 vue 组件，我想跟踪用户何时将浏览器更改为全屏或退出全屏。我尝试在安装组件时添加事件侦听器，但是当我尝试全屏或返回窗口模式时，这些事件永远不会被调用。控制台中不显示任何错误。组件本身不是全屏的。我有一个 laravel 刀片页面正在运行，这段代码在其中显示的一个 vue 组件中。

这是 Vue 组件中的代码：

<script>
    export default {
        mounted() {
            document.addEventListener('fullscreenchange',this.logFullScreen);
            console.log("Mounted");
        },
        methods: {
            currentDatetime: function () {
                var today = new Date();
                var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
                var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
                return date+' '+time;
            },
            logFullScreen: function () {
                if(document.fullscreenElement)
                {
                    console.log("Changed to fullscreen at "+this.currentDatetime);
                }
                else
                {
                    console.log("Exited fullscreen at "+this.currentDatetime);
                }
            }
        },
        destroyed() {
            document.removeEventListener('fullscreenchange',this.logFullScreen);
        }
    }
</script>
4

1 回答 1

1

当您通过单击 F11 进入全屏时。不会触发“fullscreenchange”事件。

fullscreenchange 事件在调用 fullscreenrequest 时触发。

你可以试试这个：

$(document).on('keydown', function(event) {
    if (event.which == 122) {
        // check if fullscreen or not ...
    }
});

对不起，我的英语不好

于 2020-12-30T10:21:19.387 回答