<抽屜 錨=“左” 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>
P粉3669463802023-08-14 00:16:12
在React中處理巢狀元素和滑鼠事件時,您描述的問題是常見的。當您有嵌套元素並將onMouseEnter和onMouseLeave事件附加到父元素時,即使滑鼠仍在父元素的範圍內,移動滑鼠到子元素上也會觸發父元素的onMouseLeave事件。這是因為滑鼠已經“離開”了父元素並“進入”了子元素。
為了解決這個問題,您可以使用onMouseOver和onMouseOut事件來取代onMouseEnter和onMouseLeave。 onMouseOver和onMouseOut事件不會以相同的方式冒泡,因此它們可以幫助避免這個問題。