रोकें onmouseout बच्चे तत्वों

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

मैं कैसे फायरिंग जब माउस NavDropdown का एक बच्चा खत्म हो गया है onmouseout रोकूँ।

क्या मुझे पता चल सकता है कि क्या मैं mouseOut में एक बच्चे से अधिक हूं?

Answer 1

यह प्रतिक्रिया विशिष्ट नहीं है। mouseover और mouseout घटनाओं के बुलबुले, इसलिए हैंडलर भी तत्व के बच्चों के लिए ट्रिगर करता है। mouseenter और mouseleave बबल नहीं करते हैं।

तो आपको इसके बजाय mouseleave सुनना चाहिए।