Question

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

在js上创建了example，一切都完美无缺，只在父级上有效。这个处理程序不一定要使用子元素，也不要冒泡，为什么会发生这种情况？

组件代码

＆＃13;

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>
    );
  }

＆＃13;

Answer 1

来自this example：

onMouseEnter和onMouseLeave事件从左边的元素传播到正在输入的元素而不是普通的冒泡，并且没有捕获阶段。

为什么要在mouseenter / mouseleave中进行浸渍工作？

1 个答案: