Prevent Onmouseout von Brennen auf untergeordneten Elemente

Question

Angesichts der folgenden:

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> 
); 

Wie kann ich verhindern, dass onMouseOut Brennen, wenn die Maus über ein Kind von NavDropdown ist.

Kann ich erkennen, ob ich über ein Kind in onMouseOut bin?

Answer 1

Dies ist nicht reaktionsspezifisch. mouseover und mouseout Ereignisse Blase, so löst der Handler auch für Kinder des Elements. mouseenter und mouseleave nicht sprudeln.

Sie sollten also stattdessen mouseleave hören.