ReactJS - 事件冒泡 - 找出事件链答案

【问题标题】：ReactJS - Event bubbling - Find out event chainReactJS - 事件冒泡 - 找出事件链
【发布时间】：2020-03-29 02:41:36
【问题描述】：

我有一个 UI 部分包含在一个 <div 中，它有一个 onClick 处理程序。在该容器中，我有另一个带有单击处理程序的元素，单击该处理程序时应该只执行元素的处理程序而不是外部 div 的处理程序。对于标准元素，这很容易，只需使用event.stopPropagation() 防止元素冒泡即可。但是，我使用的是 UI 库中的元素，更具体地说是 Element's Dropdown 元素。防止顶级按钮的传播有效，但我显然无法将自定义 onClick 事件添加到下拉项，因此当单击其中一项时，外部 div 处理程序也会被触发。我想出的解决这个问题的唯一方法是找出事件是否已经被下拉项处理过一次。

因此，问题是，我可以查看冒泡的事件是否已经通过另一个事件处理程序？

<div onClick={....}>
    <Dropdown onCommand={...} menu={(
        <Dropdown.Menu>
            {/* does not work */}
            <Dropdown.Item command="cmd1" onClick={(e) => e.stopPropagation()}>DropDown Button</Dropdown.Item>
        </Dropdown.Menu>
    })>
       {/* works */}
       <Button onClick={(e) => e.stopPropagation()}>Top level button</Button>
    </Dropdown>
</div>

【问题讨论】：

stopPropagation?
我使用了 stopPropagation，抱歉问题中的错字

标签： javascript reactjs dom-events event-bubbling

【解决方案1】：

我认为您正在寻找event.target，它标识了发生事件的元素。

现在您只需要确定event.target 是否指的是下拉项。我想基于此，当它被父 div 的 onClick 捕获时，您可以采取相应的行动。

希望这会有所帮助。

【讨论】：