React JS中点击嵌套列表项同时触发父级onClick事件问题咨询

点击嵌套子项触发父级点击事件是DOM事件冒泡机制导致的：子元素触发的点击事件会默认沿着DOM树向上层元素传播，因此父级<li>绑定的onClick回调也会被执行。

在子元素的点击回调中调用e.stopPropagation()阻止事件向上冒泡即可，修改后的代码如下：

const redirectAndShuffle = (newpath, pindex, cIndex) => {
    history.push(newpath)
}

<ul className='header__nav'>
    {NAV_ITEMS.map((nav, i) => (
        <li
            width={nav.width}
            key={i}
            onClick={() => {
                console.log('sldfj');
            }}
            className={`header__nav__item ripple__container list-link ${isActive(
                nav.path,
                nav.subMenu
            )}`}>
            {nav.alternativeName ? nav.alternativeName : nav.name}
            {nav.subMenu?.length > 0 && (
                <ul className='inner-ul' width={innerUlWidth(nav)}>
                    {nav.subMenu.map((sm, j) => (
                        <li
                            key={sm.path}
                            className={`header__nav__item list-link ripple__container`}
                            {/* 新增接收事件对象，阻止冒泡后再执行跳转逻辑 */}
                            onClick={(e) => {
                                e.stopPropagation()
                                redirectAndShuffle(sm.path, i, j)
                            }}>
                            {sm.name}
                        </li>
                    ))}
                </ul>
            )}
        </li>
    ))}
</ul>

如果你的业务场景不允许直接阻止事件冒泡，也可以在父级的点击回调中通过e.target判断触发源是否为子菜单元素，再决定是否执行父级的逻辑，上述阻止冒泡的方案是下拉导航场景下最简单通用的解法。

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