Lösen Sie Ereignisse zum gleichzeitigen Betreten und Verlassen der Maus aus

Question

<Drawer
      Anker="links"
      className="drawerArea left-navigate"
      Variante="permanent"
      open={true}
      PaperProps={{
        Stil: {
          Breite: „erben“,
          Hintergrund: „#172B4D“,
          backgroundImage: `linear-gradient(to right,#172B4D 60% , white 40%)`,
          Grenze: „keine“,
          overflowY: „versteckt“,
        },
      }}
    >
      <Box>
        <Box>
          <Box>
            <Box className="listing" sx={{ width: "100%" }}>
              <List className="mp-0 wh-100 overflow-overlay">
                {Menüs &&
                  menus.length > 0 &&
                  menus.map((item, index) => (
                    <Box key={index}>
                      <ListItem
                        ref={popoverAnchor}
                        className={`mp-0 navigationList flex-start-center`}
                       ** onMouseEnter={(e) => {
                          setNestedArr([...item?.children]);
                          popoverEnter(e);
                          setAnchorEl(e?.currentTarget);
                        }}
                        onMouseLeave={(e) => {
                          popoverLeave(e);
                        }}**
                        onClick={(e) => {
                            console.log(item,'parent_clicked')
                        }}
                      >
                        <ListItemText>
                              <Box>
                                {micons[item?.name] ? (
                                  micons[item?.name]
                                ) : (
                                  <Icon>{item?.icon_class}</Icon>
                                )}
                              </Box>
                              <Typografie>
                                {Artikelname}
                              </Typografie>
                            </Typografie>
                          }
                        />
                      </ListItem>
                    </Box>
                  ))}
              </Liste>
            </Box>
          </Box>
        </Box>
        {öffnen && nestedArr.length ? (
          <NestedMenu
            open={open}
            setOpen={(val) => setOpen(val)}
            AnchorEl={AnchorEl}
            nestedArr={nestedArr}lightBackground={lightBackground}
            secondaryColor={secondaryColor}
            popoverAnchor={popoverAnchor}
            popoverEnter={popoverEnter}
            popoverLeave={popoverLeave}
          />
        ) : Null}
      </Box>
    </Drawer>

Es gibt einige Menüs auf der linken Seite (unter Verwendung der MUI-Bibliothek und der Material-ui-nested-menu-item-Bibliothek). Wenn Sie mit der Maus über Listitems fahren, wird ein Menü mit angezeigt verschachteltes oder Untermenü und schließe das Menü, wenn die Maus es verlässt, aber das Problem, mit dem ich konfrontiert bin, ist, dass das onMouseLeave-Ereignis gleichzeitig ausgelöst wird, während ich mit der Maus über das Menü fahre, sodass das Menü nicht geöffnet wird. Ich kann nicht herausfinden, was das Problem ist.

Answer 1

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

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