防止從鼠標移開射擊子元素

Question

考慮以下幾點：

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

如何防止的onmouseout當鼠標懸停NavDropdown的孩子開槍。

我可以檢測到我是否在onMouseOut上的一個孩子？

Answer 1

這不是特定的反應。 mouseover和mouseout事件冒泡，所以處理程序也觸發元素的子元素。 mouseenter和mouseleave不要泡。

所以你應該聽取mouseleave來代替。