Prevent onmouseout od wypalania na elementach potomnych

Question

biorąc pod uwagę następujące elementy:

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

Jak mogę zapobiec onMouseOut wypalania, gdy wskaźnik myszy znajduje się nad dzieckiem NavDropdown.

Czy mogę wykryć, czy mam dziecko w usłudze onMouseOut?

Answer 1

Nie dotyczy to konkretnej reakcji. mouseover i mouseout bańki zdarzeń, więc program obsługi wyzwala również dzieci elementu. mouseenter i mouseleave nie bańka.

Powinieneś posłuchać numeru mouseleave.