React中与Article同级渲染的Button点击onClick事件不触发如何解决

问题根因&解决方案 #

根因1：事件冒泡触发菜单提前销毁（概率最高） #

你绑定在Article组件上的onMouseDown事件回调中大概率有将show设为false的逻辑，点击按钮的完整触发流程为：

1. 鼠标按下，首先触发按钮的mousedown事件，向上冒泡到Article组件
2. 触发Article的onMouseDown回调，show被改为false，Ul元素直接被销毁
3. 鼠标抬起时目标元素已经不存在，click事件需要mousedown和mouseup触发在同一个元素上才能生效，因此没有响应。

解决方案

给Ul添加mousedown事件阻止冒泡，避免触发Article的事件逻辑即可：

const onDelete = () => {  console.log('delete')};
return (
  <>
    {show &&
      <Ul 
        style={{top: pos.y, left: pos.x}}
        onMouseDown={e => e.stopPropagation()}
      >
        <Li>
          <Button onClick={onDelete}>
            <Trash /> Delete
          </Button>
        </Li>
      </Ul>
    }
    <Article ref={ref} onContextMenu={onRightClick}
      onMouseMove={onMouseMove} onMouseDown={onMouseDown} onMouseUp={onMouseUp} onMouseLeave={onMouseLeave}
    >
      {children}
    </Article>
  </>
);

根因2：层叠上下文优先级不足 #

虽然视觉上按钮显示在页面上方，但是Ul的层叠顺序可能低于Article组件，导致点击时实际命中的是Article元素而非按钮。

解决方案

给Ul添加足够高的z-index属性：

<Ul style={{top: pos.y, left: pos.x, zIndex: 9999}}>

补充说明 #

你把Ul移到Article内部后点击正常，是因为事件冒泡路径变化，菜单关闭逻辑会判定点击区域属于菜单内部，不会提前销毁Ul；样式失效是因为Ul的定位参考元素从外层容器变成了Article，原有的pos坐标适配的是外层容器，因此位置异常。

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