如何阻止HTML details元素在summary内嵌input按空格时切换状态

我懂你遇到的这个麻烦——在summary里的输入框按空格，结果details直接折叠了，本来想用stopPropagation()却没效果对吧？这问题其实出在事件类型选择和事件冒泡的时机上，咱们一步步来解决：

为什么之前的stopPropagation()没生效？ #

你之前用的是keypress事件，但现代浏览器里，空格键的keypress事件可能不会像预期那样冒泡到summary；而且summary触发折叠的逻辑是绑定在keydown事件上的，所以监听keypress根本拦不住它。

正确的解决方案 #

我们需要监听input的keydown事件，当检测到按下空格键时，阻止事件冒泡到summary，这样summary就不会收到这个按键事件，自然不会触发折叠，同时input还能正常输入空格。

单input场景的代码示例：

window.onload = function() {
  // 获取summary里的input元素
  const inputField = document.querySelector('summary input');
  
  inputField.addEventListener('keydown', function(e) {
    // 只处理空格键的情况
    if (e.key === ' ') {
      // 阻止事件冒泡到父级的summary
      e.stopPropagation();
      // 不用preventDefault，保留input输入空格的功能
    }
  });
};

多input场景（事件委托）：

如果页面上有多个这样的details组件，用事件委托更高效：

window.onload = function() {
  document.addEventListener('keydown', function(e) {
    // 检查触发事件的元素是summary内的input，且按下的是空格
    if (e.target.tagName === 'INPUT' && e.target.closest('summary') && e.key === ' ') {
      e.stopPropagation();
    }
  });
};

原理说明 #

summary元素的默认行为是：当它获得焦点时，按下空格键或回车键会切换details的展开状态。当你在input里按空格时，这个按键事件会向上冒泡到summary，触发它的默认折叠逻辑。通过在input的keydown事件中阻止冒泡，就能切断这个传递路径，让summary收不到这个按键信号，同时不影响input自身的空格输入功能。

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