React中点击FontIcon无法触发onClick 仅触发输入框onBlur问题

你遇到的异常和zIndex层叠顺序没有关系，核心是DOM事件触发时序的错位问题。

当input处于聚焦状态时，用户点击相邻FontIcon的瞬间，浏览器的事件触发顺序是：

• 首先在FontIcon节点上触发mousedown事件
• 紧接着触发input的blur事件
• 最后才会在FontIcon节点上触发mouseup、click事件

如果blur事件的处理逻辑里包含DOM更新操作（比如触发组件重渲染、临时移除/替换FontIcon节点、在input上方生成遮罩层），等blur执行完成后，用户最初点击的那个FontIcon节点已经从DOM里被替换或者隐藏了，后续要执行的mouseup、click事件就找不到对应的目标节点，最终表现为FontIcon的click事件完全不触发。这也是你调整zIndex没有效果的原因——zIndex解决的是元素被其他节点遮挡无法接收事件的问题，但这个场景下不存在层叠遮挡，是节点本身在事件流中被销毁替换了。

• 方案1：在FontIcon的mousedown阶段阻止默认焦点切换
  给FontIcon绑定onMouseDown处理器，在回调中调用e.preventDefault()。因为mousedown的触发时机早于blur事件，在这个阶段阻止默认的焦点切换行为后，浏览器不会立刻把焦点从input上移走，等FontIcon完整走完mousedown → mouseup → click的全流程后，再自然触发input的blur事件，完全不会影响原有逻辑。
  参考代码：

  <div>
    <input onBlur={this.onBlurHandler} />
    <FontIcon 
      onClick={this.clickHandle}
      onMouseDown={(e) => e.preventDefault()}
    />
  </div>
  

  这个方案是这类场景下成本最低、侵入性最小的修复方式，不会破坏原有blur逻辑的正常执行。

• 方案2：延后blur事件的业务逻辑执行时机
  如果不想调整FontIcon的事件绑定，可以把原来写在onBlur里的同步业务逻辑，用setTimeout做0延迟的宏任务包裹，把执行时机延后到当前点击事件的完整流程走完之后。这样就算blur事件本身已经触发，里面的DOM更新、状态更新操作也会等click事件执行完再跑，不会冲掉原有的点击目标。
  参考代码：

  onBlurHandler = (e) => {
    // 原有blur逻辑放到宏任务队列，等当前事件循环的同步流程（包括click）执行完再触发
    setTimeout(() => {
      // 原有的输入校验、状态更新等逻辑
    }, 0)
  }
  

• 方案3：排查blur触发时的DOM变更逻辑
  可以通过浏览器开发者工具的元素监听功能，开启对FontIcon节点的移除/变更监听，在点击图标的瞬间观察DOM树变化，确认是不是blur触发后组件重渲染导致FontIcon节点被替换。如果是重渲染带来的节点替换，可以通过给FontIcon加固定的key值，让React/Vue这类框架在重渲染时保留同一个DOM节点，避免节点被销毁重建。

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