jquery 全屏更改和 on.click 事件

Question

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

fullscreenchange 事件似乎工作正常，但每当我用 .on('click') 事件单击 link 时，全屏模式为 未定义?

    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) {...

jquery 全屏更改和 on.click 事件

jquery fullscreenchange and on.click Event

jquery

events

fullscreenchange