同时触发鼠标进入和离开事件

Question

<p><br />></p>

<抽屉
      锚=“左”
      className="drawerArea 左导航"
      变体=“永久”
      打开={真}
      纸质道具={{
        风格： {
          宽度：“继承”，
          背景：“#172B4D”，
          backgroundImage: `线性渐变（向右，#172B4D 60%，白色 40%）`,
          边框：“无”，
          溢出Y：“隐藏”，
        },
      }}
    >
      <盒子>
        <盒子>
          <盒子>
            ;
              <列表类名=“mp-0 wh-100溢出覆盖”>
                {菜单&&
                  菜单.长度> 0 &&
                  menus.map((项目，索引) => (
                    <框键={index}>
                      <列表项
                        参考={popoverAnchor}
                        className={`mp-0 navigationList flex-start-center`}
                       ** onMouseEnter={(e) =>; {
                          setNestedArr([...item?.children]);
                          弹出框输入(e);
                          setAnchorEl(e?.currentTarget);
                        }}
                        onMouseLeave={(e) =>; {
                          弹出离开（e）；
                        }}**
                        onClick={(e) =>; {
                            console.log(项目,'parent_clicked')
                        }}
                      >
                        <列表项文本>
                              <盒子>
                                {微图标[项目？.名称]？ （
                                  微子[项目？.名称]
                                ) : (
                                  <图标>{item?.icon_class}
                                )}
                              </框>
                              <版式>
                                {项目名}
                              </版式>
                            </版式>
                          }
                        >>
                      </列表项>
                    </框>
                  ))}
              
            </框>
          </框>
        </框>
        {打开&&嵌套Arr.长度？ （
          <嵌套菜单
            打开={打开}
            setOpen={(val) =>;设置打开（val）}
            锚El={锚El}
            嵌套Arr = {嵌套Arr}lightBackground={lightBackground}
            secondaryColor={secondaryColor}
            popoverAnchor={popoverAnchor}
            popoverEnter={popoverEnter}
            popoverLeave={popoverLeave}
          />
        ) : null}
      </Box>
    </Drawer></pre>
<p><strong>页面左侧有一些菜单（使用MUI库和material-ui-nested-menu-item库），当鼠标悬停在Listitems上时，它会显示一个带有嵌套或子菜单的菜单，并在鼠标离开时关闭菜单，但我面临的问题是在悬停在菜单上时同时触发了onMouseLeave事件，所以菜单不会打开。我无法找出问题所在。</strong></p>

Answer 1

在React中处理嵌套元素和鼠标事件时，您描述的问题是常见的。当您有嵌套元素并将onMouseEnter和onMouseLeave事件附加到父元素时，即使鼠标仍在父元素的范围内，移动鼠标到子元素上也会触发父元素的onMouseLeave事件。这是因为鼠标已经“离开”了父元素并“进入”了子元素。

为了解决这个问题，您可以使用onMouseOver和onMouseOut事件来替代onMouseEnter和onMouseLeave。onMouseOver和onMouseOut事件不会以相同的方式冒泡，因此它们可以帮助避免这个问题。