vue-video-player 自定义的控制栏，全屏后，点击事件无效？

Question

问题描述

自定义的视屏控制栏，有全屏按钮，全屏事件已写好，但是进入全屏后底部控制栏的事件就无效了，点击无效，表现出来的是视频的播放、暂停事件。控制栏本来是看不见的，用了z-index提高层级。

问题出现的环境背景及自己尝试过哪些方法

本来以为是事件的冒泡，结果阻止事件冒泡后，也没用；最后发现全屏后，我设置的点击事件根本没触发。

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

      <video-player  class="video-player-box"
                 ref="videoPlayer"
                 :options="playerOptions"
                 :playsinline="true"
                 customEventName="customstatechangedeventname"
                 @play="onPlayerPlay($event)"
                 @pause="onPlayerPause($event)"
                 @ended="onPlayerEnded($event)"
                 @waiting="onPlayerWaiting($event)"
                 @playing="onPlayerPlaying($event)"
                 @loadeddata="onPlayerLoadeddata($event)"
                 @timeupdate="onPlayerTimeupdate($event)"
                 @canplay="onPlayerCanplay($event)"
                 @canplaythrough="onPlayerCanplaythrough($event)"
                 @statechanged="playerStateChanged($event)"
                 @ready="playerReadied"
                 @on-change="progressChange"
                 >
  </video-player> 
  
  <div class="fullScreen vjs-fullscreen-control vjs-control vjs-button" 
                             aria-live="polite"  @click="fullScreenHandle" aria-disabled="false">
                            全屏
                        </div>

//全屏

        fullScreenHandle(){
            console.log('111111')
            if(!this.player.isFullscreen()){  
                this.player.requestFullscreen();  
                this.player.isFullscreen(true);  
            }else{  
                this.player.exitFullscreen();  
                this.player.isFullscreen(false);  
            }  
        },

你期待的结果是什么？实际看到的错误信息又是什么？

希望全屏后，自己定义的事件能正常执行。现在错误就是事件没被触发

Answer 1

有没有解决方案