Why working dipping in mouseenter/mouseleave?

Question

Wrote for example handlers mouseenter / mouseleave in react, and to my surprise e.target return child elements.

Created example on js, and there everything perfectly works, only on the parent. This handlers dont must work with child elements and dont bubbled, so why its happening?

Component code

and 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

From the react docs :

The onMouseEnter and onMouseLeave events propagate from the element being left to the one being entered instead of ordinary bubbling and do not have a capture phase.