HTML5视频点击播放/暂停应优先用原生controls或video元素自身绑定click事件，避免父容器冒泡干扰；需用event.stopPropagation()区分目标并阻止多余触发；play/pause事件不冒泡，适合同步UI；移动端建议用touchstart替代click并做好兼容处理。
HTML5视频元素的点击播放/暂停功能，本身不依赖事件冒泡，但若在父容器上监听点击、又同时给加了点击处理，就容易因冒泡导致重复触发或逻辑错乱。关键在于明确事件目标、合理使用event.stopPropagation()，以及优先利用原生行为减少手动干预。
视频自身点击控制：避免手动绑定，优先用controls或onclick
如果只需基础播放/暂停，最稳妥的方式是直接启用原生控件：。用户点击播放按钮或进度条区域，浏览器自动处理，不涉及JS事件流。若需自定义点击区域（比如整个视频画布单击切换），可直接在标签上写内联onclick，或用addEventListener('click', ...)绑定到视频本身——此时event.target恒为video元素，无冒泡干扰。
- 推荐做法：用
video.paused ? video.play() : video.pause()，简洁可靠 - 注意：Safari/iOS对自动播放限制严格，
play()必须由用户手势触发，否则会抛错 - 避免在
click里反复调用load()或重置currentTime，可能打断原生状态
父容器监听时：区分点击目标，必要时阻止冒泡
当视频嵌套在中，且父容器也有点击逻辑（如打开详情页），就必须判断event.target是否为视频本身。否则一次点击会同时触发父级和子级的回调。
- 检查
event.target === videoEl或event.target.closest('video')来精确识别来源 - 若确认是点在视频上，且父容器逻辑不应执行，就在视频的点击处理器末尾加
event.stopPropagation() - 不要在父容器里无条件
stopPropagation()，否则会屏蔽其内部其他子元素（如封面图、按钮）的正常事件
与play/pause事件配合：它们不冒泡，但可用来同步UI状态
play和pause是媒体事件，原生不冒泡，只在元素上触发。它们适合用于更新播放按钮图标、禁用/启用控件等副作用，比单纯监听click更准确——因为播放也可能由API调用、快捷键、自动播放等触发。
- 示例：监听
video.addEventListener('play', () => btn.textContent = '⏸') - 注意
playing事件在缓冲后真正开始渲染帧时才触发，比play稍晚，按需选用 - 这些事件无需
stopPropagation，天生隔离
移动端特别注意：click延迟与touchstart替代方案
在iOS/Android上，click有约300ms延迟，且某些全屏视频容器会拦截点击。若发现点击无响应，可改用touchstart，但需谨慎：
-
touchstart会冒泡，同样需要stopPropagation()或目标判断 - 避免同时绑定
click和touchstart，防止双端重复触发，可用if ('ontouchstart' in window)做环境判断 - 移动端建议加
preventDefault()仅当需要阻止默认滚动行为，否则可能影响页面滑动
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
