Impedire onmouseout di sparare su elementi figlio

Question

Data la seguente:

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

Come posso evitare onMouseOut sparare quando il mouse si trova sopra un bambino di NavDropdown.

Posso rilevare se ho un figlio su onMouseOut?

Answer 1

Questo non è React specifico. mouseover e mouseout bolla di eventi, quindi il gestore si attiva anche per i bambini dell'elemento. mouseenter e mouseleave non bolle.

Quindi dovresti ascoltare mouseleave invece.