Déclenchez simultanément les événements d'entrée et de sortie de la souris
P粉018548441
2023-08-13 18:26:33
<p><br /></p>
<pre class="brush:php;toolbar:false;"><Tiroir
ancre = "gauche"
className = "drawerArea navigation à gauche"
variante = "permanent"
ouvert={vrai}
PaperProps={{
style: {
largeur : "hériter",
arrière-plan : "#172B4D",
backgroundImage : dégradé linéaire (à droite, #172B4D 60 %, blanc 40 %) ,
bordure : "aucun",
overflowY : "caché",
},
}}
>
<Boîte>
<Boîte>
<Boîte>
<Box className="listing" sx={{ width: "100%" }}>
<List className="mp-0 wh-100 overflow-overlay">
{menus &&
menus.longueur > 0 &&
menus.map((élément, index) => (
<Clé de boîte={index}>
<ListeItem
ref={popoverAnchor}
className={`mp-0 navigationList flex-start-center`}
** onMouseEnter={(e) => {
setNestedArr([...élément?.enfants]);
popoverEnter(e);
setAnchorEl(e?.currentTarget);
}}
onMouseLeave={(e) => {
popoverLeave(e);
}}**
onClick={(e) => {
console.log(élément,'parent_cliqué')
}}
>
<ListItemText>
<Boîte>
{micons[élément?.nom] ? (
micons[élément?.nom]
) : (
<Icône>{item?.icon_class}</Icon>
)}
≪/Boîte>
<Typographie>
{nom de l'article}
</Typographie>
</Typographie>
}
/>
</ListItem>
≪/Boîte>
))}
</Liste>
≪/Boîte>
≪/Boîte>
≪/Boîte>
{ouvrir && nestedArr.longueur ? (
<MenuImbriqué
ouvert={ouvert}
setOpen={(val) => setOpen(val)}
ancreEl={ancreEl}
nestedArr={nestedArr}lightBackground={lightBackground}
couleursecondaire={couleursecondaire}
popoverAnchor={popoverAnchor}
popoverEnter={popoverEnter}
popoverLeave={popoverLeave}
/>
) : nul}
≪/Boîte>
</Tiroir></pré>
<p><strong> Il y a quelques menus sur le côté gauche de la page (utilisant la bibliothèque MUI et la bibliothèque materials-ui-nested-menu-item), lorsque la souris passe sur Listitems, elle affichera un menu avec imbriqué ou sous-menu et fermez le menu lorsque la souris quitte, mais le problème auquel je suis confronté est que l'événement onMouseLeave est déclenché en même temps lors du survol du menu, de sorte que le menu ne s'ouvre pas. Je n'arrive pas à comprendre quel est le problème. </strong></p>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Le problème que vous décrivez est courant lors de la gestion des éléments imbriqués et des événements de souris dans React. Lorsque vous avez des éléments imbriqués et que vous attachez des événements onMouseEnter et onMouseLeave à l'élément parent, déplacer la souris sur l'élément enfant déclenchera l'événement onMouseLeave de l'élément parent même si la souris est toujours à portée de l'élément parent. C'est parce que la souris a « quitté » l'élément parent et « est entrée » dans l'élément enfant.
Pour résoudre ce problème, vous pouvez utiliser les événements onMouseOver et onMouseOut au lieu de onMouseEnter et onMouseLeave. Les événements onMouseOver et onMouseOut ne se déclenchent pas de la même manière, ils peuvent donc contribuer à éviter ce problème.