React应用无法点击输入框、选中文本，排查CSS和依赖仍未解决

第一步：快速定位根因 #

打开浏览器开发者工具的元素选择器，点击异常区域的文本/输入框，确认最终选中的DOM节点是否为目标节点：

• 如果选中的是上层透明节点：基本可以判定是全局蒙层（模态框、加载遮罩、全局提示组件等）未正常卸载，仅设置了透明属性但未处理pointer-events状态，或者z-index配置错误导致蒙层始终悬浮在最上层拦截交互，直接找到对应组件的销毁逻辑修复即可
• 如果选中的是目标节点，继续向下排查

第二步：节点属性&事件排查 #

CSS属性检查 #

• 查看目标节点及所有父级节点是否设置了user-select: none，该属性会直接禁止文本选中
• 查看目标节点及所有父级节点是否设置了pointer-events: none，该属性会直接拦截所有鼠标交互事件

全局事件拦截检查 #

• 检查是否在document/window上绑定了mousedown、selectstart、click事件，且回调中调用了e.preventDefault()，该操作会全局禁用文本选中和输入框点击行为
• 检查是否存在异常的全局事件委托逻辑，错误匹配了所有元素的交互事件直接拦截返回

第三步：React专属场景排查 #

• 检查是否使用createPortal渲染的全局组件未正确销毁，导致事件被全局拦截
• 检查根组件的生命周期/副作用中绑定的全局事件是否未正常卸载，若迁移项目时同步了根组件逻辑，问题会同步复现
• 若使用React 18的并发渲染模式，可先关闭<StrictMode>尝试复现，排除并发渲染导致的状态更新阻塞问题

快速验证方法 #

在浏览器控制台执行以下代码，若执行后交互恢复正常，可100%确认是全局CSS或事件拦截导致的问题：

// 移除三类全局交互事件的捕获阶段监听
['mousedown', 'selectstart', 'click'].forEach(eventName => {
  document.removeEventListener(eventName, () => {}, true);
});
// 强制恢复全局交互属性
document.body.style.cssText += 'user-select: auto !important; pointer-events: auto !important;';
document.querySelectorAll('*').forEach(el => {
  el.style.cssText += 'user-select: inherit !important; pointer-events: inherit !important;';
});

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