javascript - 为什么要在 mouseenter/mouseleave 中进行浸入操作？

Question

在react中编写了示例处理程序mouseenter/mouseleave，令我惊讶的是e.target返回子元素。

已创建 example在 js 上，一切都完美运行，只有在父级上。 该处理程序不必与子元素一起使用，也不会冒泡，那么为什么会发生这种情况呢？

组件代码

和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 :

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.