元素不触发 click 事件，因其仅为语义化元数据容器、不参与渲染与事件流；交互须通过 的 texttrackchange、cuechange 等事件及 textTracks API 控制。
track 元素本身不触发 click 事件
<track></track> 是纯语义化元数据容器，浏览器不会把它渲染成可交互的 DOM 节点，也不派发 click、mouseover 等用户事件。你给它绑 addEventListener('click', ...) 不会生效——不是写错了，是它根本没这个能力。
常见错误现象：document.querySelector('track').addEventListener('click', ...) 静默失败，控制台无报错但回调从不执行；或取到的是 null，因为 <track></track> 不在渲染树中。
-
<track></track>只能通过<video></video>的 API 控制字幕显隐和语言切换 - 它的状态变更（如启用/禁用某条字幕轨）会触发
video元素的loadstart、loadedmetadata或emptied，但不是直接事件源 - 无障碍场景下，屏幕阅读器会读出字幕内容，但这不经过 JS 事件流
监听字幕显示变化要用 video 的 texttrackchange 事件
真正反映字幕“是否正在显示”的信号来自 <video></video> 元素自身的 texttrackchange 事件（部分浏览器也支持监听 addtrack 或检查 video.textTracks 的 onchange 属性）。
示例：监听当前激活的字幕轨
立即学习“前端免费学习笔记（深入）”；
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
const video = document.querySelector('video');
video.addEventListener('texttrackchange', () => {
const activeTrack = Array.from(video.textTracks)
.find(track => track.mode === 'showing');
console.log('当前显示字幕轨:', activeTrack?.label || '无');
});
-
textTracks是只读的TextTrackList，每个TextTrack有mode（disabled/hidden/showing） - 不要轮询
mode，而是监听video的texttrackchange—— 它在用户切换字幕语言或开关字幕时触发 - 注意兼容性：
texttrackchange在 Chrome/Firefox/Edge 中稳定，Safari 16.4+ 才支持该事件名（旧版需监听addtrack+ 手动绑定子项onchange）
想响应“用户点击字幕按钮”？监听 video 的 controls UI 事件不现实
原生视频控件里的字幕开关按钮（通常是个“CC”图标）是 UA Shadow DOM 内部实现，无法直接绑定事件，也不能用 CSS 选中或 JS 访问。
如果你需要自定义字幕开关行为：
- 隐藏原生 controls：
<video controlslist="nodownload noremoteplayback" disablepictureinpicture></video> - 用普通
<button></button>模拟开关，并手动调用textTrack.mode = 'showing'或'disabled' - 把自定义按钮和
<track></track>关联起来，例如用data-track-id匹配textTracks[i].id - 这样你就能自由监听按钮的
click，并精确控制哪条轨启用
字幕内容更新时怎么触发逻辑？靠 timeupdate + cuechange
字幕文本实际显示变化发生在时间轴推进时，此时触发的是 TextTrackCue 的 enter / exit，但这些事件不能直接监听——必须先拿到具体 cue 实例。
可行路径：
const track = video.textTracks[0];
track.mode = 'hidden'; // 防止自动显示干扰
track.addEventListener('cuechange', () => {
const showingCues = track.activeCues;
if (showingCues.length > 0) {
console.log('当前显示字幕:', showingCues[0].text);
}
});
-
cuechange是TextTrack对象上的事件，不是<track></track>标签 - 必须先将
track.mode设为'hidden'或'disabled'，否则浏览器可能跳过该事件 -
activeCues是实时更新的类数组，包含所有当前时间点匹配的字幕条目 - 注意性能：频繁的
timeupdate会触发大量cuechange，避免在其中做重操作
<track></track> 标签本身，其实它连 offsetParent 都是 null，压根不在文档流里。所有交互逻辑必须绕回到 <video></video> 实例和它的 textTracks 列表上。 
