마우스 입력 및 종료 이벤트를 동시에 트리거합니다.

Question

<서랍
      앵커="왼쪽"
      className="drawerArea 왼쪽 탐색"
      변형="영구"
      열림={참}
      종이소품={{
        스타일: {
          width: "상속",
          배경: "#172B4D",
          backgroundImage: `선형 그라데이션(오른쪽으로,#172B4D 60%, 흰색 40%)`,
          테두리: "없음",
          OverflowY: "숨김",
        },
      }}
    >
      <박스>
        <박스>
          <박스>
            <Box className="listing" sx={{ 너비: "100%" }}>
              <List className="mp-0 wh-100 오버플로 오버레이">
                {메뉴 &&
                  메뉴.길이 > 0 &&
                  menus.map((항목, 색인) => (
                    <박스 키={index}>
                      <목록항목
                        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(항목,'parent_clicked')
                        }}
                      >
                        <ListItemText>
                              <박스>
                                {micons[항목?.이름] ? (
                                  마이콘[항목?.이름]
                                ) : (
                                  <아이콘>{item?.icon_class}</Icon>
                                )}
                              </박스>
                              <타이포그래피>
                                {상품명}
                              </타이포그래피>
                            </타이포그래피>
                          }
                        />
                      </목록항목>
                    </박스>
                  ))}
              </목록>
            </박스>
          </박스>
        </박스>
        {열기 && 중첩Arr.length ? (
          <중첩메뉴
            열다={열다}
            setOpen={(val) => setOpen(발)}
            앵커엘={앵커엘}
            중첩Arr={중첩Arr}가벼운 배경={lightBackground}
            이차색상={보조색상}
            popoverAnchor={popoverAnchor}
            popoverEnter={popoverEnter}
            popoverLeave={popoverLeave}
          />
        ) : 없는}
      </박스>
    </서랍>

페이지 왼쪽에는 몇 가지 메뉴가 있습니다(MUI 라이브러리 및 Material-ui-nested-menu-item 라이브러리 사용). 마우스를 Listitems 위로 가져가면 다음과 같은 메뉴가 표시됩니다. 중첩 또는 하위 메뉴를 사용하고 마우스가 떠날 때 메뉴를 닫는 데 문제가 있는 것은 메뉴 위로 마우스를 가져가는 동안 onMouseLeave 이벤트가 동시에 실행되어 메뉴가 열리지 않는다는 것입니다. 문제가 무엇인지 알 수 없습니다.

Answer 1

당신이 설명하는 문제는 React에서 중첩된 요소와 마우스 이벤트를 처리할 때 흔히 발생합니다. 중첩된 요소가 있고 onMouseEnter 및 onMouseLeave 이벤트를 상위 요소에 연결하는 경우 마우스가 하위 요소 위로 이동하면 마우스가 여전히 상위 요소 범위 내에 있더라도 상위 요소의 onMouseLeave 이벤트가 트리거됩니다. 이는 마우스가 상위 요소를 "떠나"고 하위 요소로 "들어가기" 때문입니다.

이 문제를 해결하려면 onMouseEnter 및 onMouseLeave 대신 onMouseOver 및 onMouseOut 이벤트를 사용할 수 있습니다. onMouseOver 및 onMouseOut 이벤트는 동일한 방식으로 버블링되지 않으므로 이 문제를 방지하는 데 도움이 될 수 있습니다.