为什么要在mouseenter/mouseleave中工作？

Question

写了例如处理程序mouseenter/mouseleave中的反应，并令我惊讶的是e.target返回子元素。

在js上创建了example，那里的一切都完美的工作，只有父母。 这个处理程序不必与子元素一起工作，也不会冒泡，为什么它会发生？

元器件代码

和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

从the react docs：

的onMouseEnter和onMouseLeave事件从元件被传播留给正在进入的人而不是普通的冒泡，并且没有捕捉阶段。