HTML中如何阻止空格键触发容器按钮的事件传播

问题核心在于：当焦点在<input>中按下空格键时，keydown事件会向上冒泡到外层<button>，而浏览器默认会将按钮上的空格键keydown事件转化为click事件——这就是你之前用keyup或oninput无效的原因，事件冒泡在keydown阶段就已经触发了按钮的逻辑。

直接在<input>的keydown事件中阻止事件传播即可，同时保留输入空格的默认行为：

<button onclick="alert('button activated');">
  Part of label
  <input 
    type="text" 
    onclick="(arguments[0] || window.event).stopPropagation();"
    onkeydown="(arguments[0] || window.event).stopPropagation();"
  >
  End of label
</button>

为什么这个方法有效？ #

• keydown是空格键事件触发的第一个阶段，在此阶段阻止冒泡，能让事件无法传递到外层按钮，避免浏览器触发按钮的click行为。
• 没有调用preventDefault()，所以输入空格的默认行为会正常执行，不会影响输入操作。

如果需要更易维护的写法，也可以用独立事件处理函数：

<button id="outerBtn">
  Part of label
  <input id="innerInput" type="text">
  End of label
</button>

<script>
document.getElementById('outerBtn').addEventListener('click', () => {
  alert('button activated');
});

document.getElementById('innerInput').addEventListener('click', (e) => {
  e.stopPropagation();
});

document.getElementById('innerInput').addEventListener('keydown', (e) => {
  // 仅针对空格键阻止冒泡，其他按键不受影响
  if (e.key === ' ') {
    e.stopPropagation();
  }
});
</script>

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