jquery fullscreenchange和on.click事件

Question

我有一個可以全屏顯示的響應式視頻滑塊。 當在全屏模式下的廣告圖像上單擊我想要得到的圖像的.clientWidth設置一個div 其中視頻的iframe中加載（.SP-層）。

的fullscreenchange事件似乎做工精細，但每當我點擊與.on('click')事件的鏈接時，fullScreenMode是undefined？

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