同時觸發滑鼠進入與離開事件

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事件不會以相同的方式冒泡，因此它們可以幫助避免這個問題。