Warum funktioniert das Eintauchen in Maus/Maus?

Question

Schrieb zum Beispiel Handler mouseenter/mouseleave in reagieren, und zu meiner Überraschung e.target zurück Kind Elemente.

Erstellt example auf js, und dort funktioniert alles perfekt, nur auf dem Elternteil. Diese Handler müssen nicht mit Kindelementen arbeiten und nicht sprudeln, also warum passiert es?

Component Code

und codepen

class MovieItem extends Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     popup: false 
 
    }; 
 
    } 
 

 
    outItem = (e) => { 
 
    e.stopPropagation() 
 
    console.log(e.target) 
 

 
    e.target.style.opacity = 0 
 
    // this.setState({ 
 
    //  popup: true 
 
    // }); 
 

 
    }; 
 

 
    leaveItem = (e) => { 
 
    e.stopPropagation() 
 
    console.log(e.target) 
 
    e.target.style.opacity = 1 
 
    this.setState({ 
 
     popup: false 
 
    }); 
 

 
    }; 
 

 

 
    render() { 
 
    return (< 
 
     div className = "movie-item" 
 
     id = { 
 
     this.props.id 
 
     } 
 
     onMouseEnter = { 
 
     (e) => this.outItem(e) 
 
     } 
 
     onMouseLeave = { 
 
     (e) => this.leaveItem(e) 
 
     } > 
 

 
     < 
 
     div className = "movie-item__data" > 
 

 
     < 
 
     div className = "movie-item__poster" > 
 
     < 
 
     img src = "http://lorempixel.com/140/205/" 
 
     alt = ""/> 
 
     < 
 
     /div> < 
 
     div className = "movie-item__title" > title < /div> 
 

 
     < 
 
     /div> < 
 
     /div> 
 
    ); 
 
    }

Answer 1

Von the react docs:

Die onMouseEnter und onMouseLeave Ereignisse propagieren aus dem Element zu sein demjenigen überlassen, der anstelle von gewöhnlichem Blubbern betreten wird und keine Einfangphase hat.