javascript - 在 HTML 中，如何停止激活容器按钮的空格键的传播

Question

假设我有一个 <input>里面 <button>像下面这样。在 onclick 内执行 stopPropagation停止点击文本输入来激活包含按钮。但是，当我在该文本输入内按空格键时，如何阻止该事件传播并从而启动按钮？

换句话说，我想在下面的文本输入中自由输入空格字符而不收到警报。这可以吗？

我认为答案可能是 onkeyup或oninput停止传播，但这样做不会改变任何东西。

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

Answer 1

您可以添加 onkeyup 和 preventDefault，以防止释放space 按键而触发该按钮点击。

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