Prevent onmouseout from firing on child elements

Question

Given the following:

render() {

  const onMouseOver = (event) => {
    this.setState({ isHovering: true });
  };

  const onMouseOut = (event) => {
    this.setState({ isHovering: false });
  };

  const open = this.state.isHovering ? true : false;

  return (
    <Nav className={styles.TopNav} bsStyle="pills" activeKey={1}>
      <NavDropdown
        className={dropDownClasses}
        eventKey={1}
        open={open}
        title="Cards"
        id="nav-dropdown"
        onMouseEnter={onMouseOver}
        onMouseOut={onMouseOut}>
        <MenuItem eventKey="1.1">Action</MenuItem>
        <MenuItem eventKey="1.2">Another action</MenuItem>
      </NavDropdown>
      <NavItem className={styles.navLink} eventKey={2}>Blog</NavItem>
    </Nav>
  );

How do I prevent onMouseOut firing when the mouse is over a child of NavDropdown.

Can I detect if I am over a child in onMouseOut?

Answer 1

This is not React specific. mouseover and mouseout events bubble, so the handler also triggers for children of the element. mouseenter and mouseleave don't bubble.

So you should listen to mouseleave instead.