IE11中HTML5 Video控件点击失效，Tab可正常控制问题求助

这种情况我之前碰到过好几次，大概率是这几个常见原因导致的，咱们一步步来排查解决：

1. 检查是否有透明元素覆盖控件 #

有时候页面里的绝对定位/固定定位元素（比如隐藏的弹窗遮罩、自定义悬浮层），哪怕是完全透明的，也会挡住视频控件的点击区域。你可以：

• 打开浏览器开发者工具（F12），在Elements面板里选中video元素，查看它的上层是否有其他元素重叠
• 如果确实有无关的覆盖元素，给它加上pointer-events: none样式，让点击穿透到下方的控件上

2. 排查事件冒泡/默认行为被阻断的情况 #

如果页面里有全局点击事件监听，或者video的父元素写了event.stopPropagation()、event.preventDefault()，可能会打断原生控件的点击逻辑。比如这种代码就可能出问题：

document.addEventListener('click', function(e) {
  e.stopPropagation(); // 全局阻止冒泡会影响控件点击
});

解决办法：

• 暂时注释掉这类全局事件，测试控件是否恢复正常
• 如果是父元素的事件导致的，可以在处理逻辑里判断目标元素，放过视频控件的点击：

parentElement.addEventListener('click', function(e) {
  // 如果点击的是视频控件内的元素，直接返回不阻止
  if (e.target.closest('video')) return;
  e.stopPropagation();
});

3. 检查自定义JS与原生控件的冲突 #

既然你用JS实现了播放功能，要确认有没有给video绑定的自定义事件影响了原生控件。比如如果写了这样的代码：

const video = document.getElementById('myVideo');
video.addEventListener('click', function(e) {
  e.preventDefault(); // 阻止默认行为会让原生控件失效
  // 自定义播放/暂停逻辑
});

这种情况下，原生控件的点击会被阻断。你可以调整逻辑：

• 只在点击视频内容区域（非控件部分）时触发自定义逻辑
• 去掉e.preventDefault()，让原生控件的默认行为正常执行

4. 确认控件初始化状态 #

虽然你说控件可见，但还是可以核对下：

• video元素是否正确设置了controls属性（比如<video controls>）
• 有没有JS代码动态移除过controls属性（比如video.removeAttribute('controls')）

5. 测试浏览器兼容性 #

换个主流浏览器（比如Chrome、Firefox）试试，排除特定浏览器的兼容问题。如果只有某款浏览器出问题，可以针对性调整代码。

要是上面的方法都试过还是没解决，你可以贴出相关的HTML和JS代码片段，这样能更精准定位问题~

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