在document上调用preventDefault为何会干扰子元素事件？

核心原因：keypress的默认行为被阻止，导致input值未变更，onChange无触发条件 #

你遇到的问题不是document的事件监听器阻断了input的onChange事件，而是两个事件的逻辑关联引发的连锁反应：

1. 事件本质差异：keypress是键盘输入事件，onChange是input值变更事件，二者不属于同一个事件的冒泡/捕获流程。
2. keypress的默认行为：在input中按下可输入字符的按键时，浏览器的默认行为是将字符追加到input的value中，完成值的更新。
3. preventDefault的作用：无论在keypress事件的捕获还是冒泡阶段调用e.preventDefault()，都会直接阻止这个默认行为——input的value不会发生任何变化。
4. onChange的触发条件：只有当input的value实际发生改变时，onChange事件才会被触发。既然value没变化，onChange的回调自然不会执行。

验证逻辑：换个场景就能看明白 #

如果在input自身的keypress事件中调用preventDefault，同样会阻止onChange执行：

export const App: FC<{ name: string }> = ({ name }) => {
  return (
    <div>
      <input
        onKeyPress={(e) => e.preventDefault()}
        onChange={() => {
          console.log('CHANGED!'); // 同样不会执行
        }}
      />
    </div>
  );
};

这足以说明，问题核心不是事件冒泡的顺序，而是keypress默认行为被阻止后，input值未更新，导致onChange失去触发前提。

补充：事件顺序的细节 #

你关于document的keypress监听器处于冒泡阶段的判断是对的——事件确实会先在input元素触发，再冒泡到document。但这并不影响preventDefault的作用，因为preventDefault是针对当前事件（keypress）本身的默认行为，和事件传播顺序无关，只要在事件处理流程完成前调用，就会生效。

内容的提问来源于stack exchange，提问作者sir-haver