关于pointer-events:none与视频空格键触发播放的技术咨询

1. 这是预期行为吗？ #

是预期行为。pointer-events: none仅负责禁用元素的鼠标交互逻辑，完全不影响键盘焦点和键盘事件的处理。当播放按钮已经获取焦点后，哪怕video元素加上了pointer-events: none，浏览器依然会响应这个焦点元素的键盘操作——比如按空格键触发播放/暂停。

2. 最简洁的阻止方法是什么？（能否不使用JavaScript？） #

纯CSS方案（存在兼容性限制） #

完全不用JS的话，只能通过让控件无法获取焦点来间接阻止，但效果受浏览器限制：
给video设置tabindex="-1"，同时在禁用类里隐藏焦点样式，尝试阻止内部控件获取焦点。不过因为video的控件属于浏览器内置的Shadow DOM，常规CSS没法直接选中这些控件，所以这个方案在部分浏览器里可能失效。

video {
  tabindex: -1;
}
.disabled {
  pointer-events: none;
  outline: none;
}

更可靠的方案（仅需少量JS） #

最简洁且稳定的方式，是在添加禁用类的同时，让video或者内部的播放按钮失去焦点：

setTimeout(function(){
  const video = document.getElementById('video');
  video.classList.add('disabled');
  video.blur(); // 让video本身失去焦点
},4000)

如果要确保焦点在播放按钮时也能生效，可以尝试获取Shadow DOM里的播放按钮并执行失焦操作：

setTimeout(function(){
  const video = document.getElementById('video');
  video.classList.add('disabled');
  // 适配不同浏览器的播放按钮选择器
  const playBtn = video.shadowRoot?.querySelector('button[aria-label*="播放"], button[aria-label*="Play"]');
  playBtn?.blur();
  video.blur();
},4000)

另外，也可以直接移除video的controls属性彻底禁用控件，但这会隐藏整个控制栏，按需选择即可。

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