jquery - jquery fullscreenchange 和 on.click 事件

Question

我有一个带有响应式视频的滑块，可以全屏显示。在全屏模式下单击海报图像时，我想获取.clientWidth图像以设置加载视频 iframe 的 div (.sp-layer)。

事件fullscreenchange似乎工作正常，但是每当我单击.on('click')事件的链接时，fullScreenMode 是未定义的？

    this.fullScreenMode = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
    console.log("initial fullScreenMode: " + this.fullScreenMode);

    $(document).on('mozfullscreenchange webkitfullscreenchange fullscreenchange', function() {
        console.log('fullscreenchange Event fired');
        this.fullScreenMode = !this.fullScreenMode; 
        console.log('fullScreenMode: ' + this.fullScreenMode);

        if (!this.fullScreenMode) {
            console.log('we are not in fullscreen, do stuff');
            $('.sp-layer').css('width', '100%');    
        }
    });

    $('a.sp-video').on('click', function() {
        console.log('clicked on link');
        console.log('fullScreenMode: ' + this.fullScreenMode);

        if (this.fullScreenMode) {
            console.log('we are fullscreen, do stuff');
            var cW = $(this).children('img')[0].clientWidth;
            console.log('clientWidth of image: ' + cW);
            $(this).parent('.sp-layer').css('width', cW);
        }
    }); 

Answer 1

在您的点击处理程序中更改this.fullScreenMode为。document.fullScreenMode在单击处理程序中，this指的是按钮a.sp-video，而不是文档。

如：

$('a.sp-video').on('click', function() {
    console.log('clicked on link');
    console.log('fullScreenMode: ' + document.fullScreenMode);

    if (document.fullScreenMode) {...