Question 228513 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – On mouse Enter event it triggers onMouseleave event at same time

              <List className="mp-0 wh-100 overflow-overlay">
                {menus &&
                  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>
                              <Typography>
                                {item?.name}
                              </Typography>
                            </Typography>
                          }
                        />
                      </ListItem>
                    </Box>
                  ))}
              </List>

There are some menus(using MUI library and material-ui-nested-menu-item Library) on left side of the page. while hover on Listitems it shows a menus with nested or child menus and on mouse leave it closes the menus but the problem I am facing is while on hovering on menus it triggers the onMouseLeave event at the same time so menus doesn’t open. I am unable to figure out the problem

Tags:

2

Answers


  1. 0

    The issue you’re describing is a common one when dealing with nested elements and mouse events in React. When you have nested elements and you attach onMouseEnter and onMouseLeave events to a parent element, moving the mouse over a child element can trigger the onMouseLeave event of the parent, even if the mouse is still within the bounds of the parent. This is because the mouse has "left" the parent and "entered" the child.

    To solve this problem, you can use the onMouseOver and onMouseOut events instead of onMouseEnter and onMouseLeave. The onMouseOver and onMouseOut events do not bubble in the same way, so they can help avoid this issue.

    Login or Signup to reply.
  2. 0

    Add the same events on menu

    OR

    Get the position of menu with getBoundingClientRect(), get positin of user cursor with event.clientX abd event.clientY and compare it with menu position and accordingly hide or let visible the menu

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search