React微前端项目Chrome端文本无法选中，求排查思路

以下是结合你的项目特征（微前端、Chrome专属问题），排除你已尝试方案后的潜在原因及排查方向：

• 微前端框架的事件拦截逻辑
  多数微前端框架（如qiankun、single-spa）会做顶层容器的事件代理。Chrome对事件捕获/冒泡的优先级处理和Firefox有差异，如果某个子应用或框架核心代码在mousedown/mouseup事件中调用了preventDefault()，会直接打断文本选择的原生触发逻辑。
  排查方式：打开Chrome DevTools的「Event Listener Breakpoints」，勾选Mouse分类下的mousedown和mouseup，触发选中文本操作时，查看断点停住的代码是否存在阻止默认行为的逻辑。

• Chrome专属的渲染层或CSS属性问题

  • 检查是否有元素设置了pointer-events: none：虽然这个属性不直接控制文本选择，但如果叠加在文本上方的元素（哪怕是透明的）配置了该属性，Chrome的渲染引擎可能出现文本选择区域识别异常；
  • 排查will-change滥用：这个属性会强制创建独立渲染层，Chrome在多层嵌套（结合absolute/relative定位）时，可能出现文本选择交互失效；
  • 全局-webkit-touch-callout: none：这个移动端属性在Chrome桌面端也会生效，可能间接干扰文本选择的触发逻辑。

• React合成事件的异常处理

  • 项目顶层组件（或微前端入口）可能存在全局onMouseDown监听，误写了e.stopPropagation()或e.preventDefault()，Firefox对React合成事件的容错性更强，不会影响文本选择，但Chrome会严格执行；
  • 第三方UI组件库的隐藏配置：部分组件库会通过事件拦截而非user-select来禁用文本选择，这类样式不会在DevTools的Styles面板显示，需要排查组件的全局配置项。

• Chrome浏览器自身的干扰因素

  • 隐身模式测试：如果隐身模式下能正常选中文本，说明是浏览器扩展（广告拦截、网页增强类插件）干扰了页面交互；
  • 检查Chrome实验性设置：打开chrome://flags/，查看「Enable touch events」是否被强制开启，桌面端开启触摸事件可能导致鼠标交互被识别为触摸操作，从而影响文本选择。

• 微前端样式隔离的漏洞
  你提到DevTools无法展示继承的CSS，大概率是微前端样式隔离的问题：某个子应用的全局user-select: none样式没有被正确隔离，污染了主应用，但DevTools因为隔离机制（比如shadow DOM、样式前缀）无法在Styles面板显示继承关系。
  排查方式：直接在DevTools的「Computed」面板搜索user-select，查看当前元素的最终计算值，即使继承样式没显示在Styles里，Computed面板会展示生效的结果。

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