如何让孩子的鼠标事件优先？

Question

我有以下代码React代码，用于在播放的视频上实现绘图框。问题在于，VideoContainer底部的播放器控件受类本身中的鼠标事件影响。这是一个问题，因为它阻止了控件的搜索等。

该如何解决？我尝试了一种简单的方法，只是将顶级div的高度设置为小于播放器的高度，但是孩子的鼠标事件仍然被删除。

    render() {
        ...
        return (
        ...
        <div onMouseDown={this.onMouseDown} onMouseUp={this.onMouseUp} onMouseMove={this.onMouseMove}>
          <canvas width={width} height={height} ref={this.canvasCallback} />
          <VideoContainer>...</VideoContainer>
        </div>
        ...
    )
}

      onMouseDown(e) {
        if (this.state.drawingBox) {
          this.setState({
            isDragging: false,
            startX: e.pageX,
            startY: e.pageY
          })
        }
      }

      onMouseMove(e) {
        if (this.state.drawingBox) {
          this.setState({ isDragging: true })
        }
      }

      onMouseUp(e) {
        const { isDragging, startX, startY, drawingBox, playerBox } = this.state
        if (isDragging && drawingBox) {
          let x = Math.min(startX, e.pageX) - playerBox.x
          let y = Math.min(startY, e.pageY) - playerBox.y
          let w = Math.abs(e.pageX - startX)
          let l = Math.abs(e.pageY - startY)
          this.setState({ box: { x: x, y: y, w: w, l: l } })
        } else {
          this.setState({ isDragging: false, startX: null, startY: null })
          if (this.state.player.paused) {
            this.play()
          } else {
            this.pause()
          }
        }
      }