单击嵌套列表项也单击父反应 js

Question

我有以下导航栏，一些带有下拉菜单的项目（嵌套 ul）。当我单击嵌套的 li 项时，它也显示父 onClick 函数的console.log

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={() => redirectAndShuffle(sm.path, i, j)}>
                            {sm.name}
                        </li>
                    ))}
                </ul>
            )}
        </li>
    ))}
</ul>

Answer 1

它叫event bubbling，如果你想停止它就加Event.stopPropagation()

<li
  key={sm.path}
  className="header__nav__item list-link ripple__container"
  onClick={(e) => {
    e.stopPropagation();
    redirectAndShuffle(sm.path, i, j);
  }}
>
  {sm.name}
</li>;