元素不可点击，因其是无交互的声明式元数据容器；需通过播放器UI或video.textTracks API控制字幕，且必须确保readyState === 2后才可设置mode = 'showing'。

track 元素本身不能被点击——它不是交互控件，而是声明式元数据容器。所谓“无法点击”，本质是误把 当成按钮或开关来用。真正要操作的是播放器 UI 或 video.textTracks API。

为什么给 加 onclick 没反应

因为 是 void 元素，浏览器根本不监听它的 click 事件，也不渲染为可聚焦节点。你加的 onclick 属性会被忽略，控制台也不会报错。

• 它没有视觉表现，不占布局流，getBoundingClientRect() 返回全零值
• 开发者工具里右键检查，Elements 面板中它甚至不显示在“可交互元素”高亮范围内
• 想“点开字幕”，实际要触发的是播放器自带的字幕菜单按钮（通常带 ? 图标），不是

用户手动启用字幕后，JS 还是控制不了显示

即使用户已在播放器 UI 中勾选了某条字幕，track.mode = 'showing' 仍可能静默失败——这是浏览器对 mode 的硬性限制。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 必须等 track.readyState === 2（即 loaded）后再设 mode，否则无效
• 仅当 track.mode !== 'disabled' 时，才能设为 'showing'；若用户没点过菜单，mode 永远是 'disabled'
• 推荐监听 video.textTracks.onchange，再遍历判断：track.kind === 'subtitles' && track.language === 'zh' && track.mode === 'showing'

想绕过 UI 自动开启字幕，但页面一加载就失效

根本原因：脚本执行时 尚未完成加载，textTracks 列表为空或 readyState 为 0（notLoaded）。

• 不要在 DOMContentLoaded 后立刻操作，而应监听 video 的 loadedmetadata 或 canplay 事件
• 对每个 track 做轮询：if (track.readyState === 2) { track.mode = 'showing'; }，避免硬设
• 若用 hls.js 或 dash.js，原生 完全不生效，得走播放器 SDK 的字幕 API（如 hls.subtitleTrack = 0）

最易被忽略的一点：所有修复都建立在 已正确加载的前提下。如果 Network 面板里 zh.vtt 返回 404 或 CORS 失败，textTracks 根本不会出现该轨道——连“不可点击”的机会都没有。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！