如何覆盖按钮onclick事件？解决Plyr全屏按钮自定义失效问题

我想把Plyr播放器全屏图标的默认点击行为替换成自定义函数（比如点击时执行console.log('fullscreen btn clicked')），但尝试了两种方法都无效，相关代码如下：

原尝试代码 #

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.3/plyr.css" />
<script src="https://cdn.plyr.io/3.7.3/plyr.polyfilled.js"></script>

<div class="wrapper">
  <video id="player" playsinline controls data-poster="/path/to/poster.jpg">
    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4" />
  </video>
</div>

CSS

.wrapper {
  width: 100%;
  height: 50vh;
}

JavaScript

const player = new Plyr('#player')

// 无效方法1
$('.plyr--fullscreen-enabled [data-plyr=fullscreen]').off("click").on("click", function() {
  console.log('fullscreen btn clicked')
});

// 无效方法2
$('.plyr--fullscreen-enabled [data-plyr=fullscreen]').on("click", function(event) {
  console.log('fullscreen btn clicked')
  event.stopImmediatePropagation();
});

问题原因 #

1. 选择器.plyr--fullscreen-enabled是播放器进入全屏后才会添加的类，初始状态下该元素不存在，导致事件绑定失败；
2. Plyr的控件事件是通过事件委托绑定在父容器上的，仅阻止子元素的事件冒泡无法覆盖默认行为。

有效解决方案 #

方法1：利用Plyr官方事件钩子 #

Plyr提供了专门的全屏事件，监听这些事件并阻止默认行为即可实现自定义逻辑：

const player = new Plyr('#player');

// 监听点击全屏按钮（进入全屏）事件
player.on('enterfullscreen', (event) => {
  event.preventDefault(); // 阻止默认全屏行为
  console.log('fullscreen btn clicked');
});

// 如需监听退出全屏按钮，同理
player.on('exitfullscreen', (event) => {
  event.preventDefault();
  console.log('exit fullscreen btn clicked');
});

方法2：事件委托+阻止默认行为 #

针对动态生成的控件，使用事件委托绑定到父容器，同时阻止默认行为和事件冒泡：

const player = new Plyr('#player');

// 绑定到播放器父容器，确保动态生成的按钮能触发事件
$('.plyr').on('click', '[data-plyr="fullscreen"]', function(event) {
  event.preventDefault(); // 阻止按钮的默认全屏动作
  event.stopPropagation(); // 阻止事件冒泡到Plyr的父级处理器
  console.log('fullscreen btn clicked');
});

内容的提问来源于stack exchange，提问作者seriously