如何通过事件冒泡仅在点击子元素时触发函数？React场景下有哪些实现方案？

方案一：直接绑定事件到子按钮（最推荐） #

这种方案逻辑最直观，没有多余的判断逻辑，完全贴合需求：

// 事件处理函数保持逻辑，不需要阻止冒泡
const handleMenu = e => {
    console.log(e.target);
}

// 移除父元素的绑定，直接将事件绑定到需要触发的按钮上
<div>
    <button onClick={handleMenu}>My orders</button>
    <button onClick={handleMenu}>Payment</button>
</div>

点击父容器空白区域不会有任何事件触发，只有点击按钮时才会执行handleMenu逻辑。

方案二：父元素事件委托（适合子元素动态生成的场景） #

如果业务场景需要将事件统一绑定在父元素上（比如子元素数量不固定、动态渲染），可以通过判断事件触发源的方式过滤无效点击：

const handleMenu = e => {
    // 仅当触发源为按钮（或按钮内的嵌套元素）时才执行后续逻辑，否则直接退出
    if (!e.target.closest('button')) return
    console.log(e.target);
}

// 事件仍绑定在父元素上
<div onClick={handleMenu}>
    <button>My orders</button>
    <button>Payment</button>
</div>

如果需要更灵活的触发源标记，不限定标签类型，可以使用自定义data属性：

const handleMenu = e => {
    if (!e.target.closest('[data-menu-trigger]')) return
    console.log(e.target);
}

<div onClick={handleMenu}>
    <button data-menu-trigger>My orders</button>
    <button data-menu-trigger>Payment</button>
    {/* 其他标签元素也可以作为触发源 */}
    <span data-menu-trigger>其他操作入口</span>
</div>

注：React的合成事件完全兼容上述DOM判断逻辑，不需要额外处理兼容性问题。

内容的提问来源于stack exchange，提问作者Md Nasir Ahmed