なぜmouseenter/mouseleaveに浸漬作業していますか？

Question

反応の中のハンドラーmouseenter/mouseleaveを書きました。私の驚いたことにe.targetは子要素を返します。

jsにexampleを作成し、すべてが完全に機能します。親でのみ有効です。 このハンドラは子要素で動作しなければならず、泡立っていません。その理由は何ですか？

コンポーネントコードthe react docsから

と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

：

onMouseEnterとonMouseLeaveイベントがある要素から伝播通常のバブリングの代わりに入力されたものに残され、キャプチャフェーズはありません。