Как сделать так, чтобы событие мыши ребенка имело приоритет? - PullRequest
Новая
       10

Как сделать так, чтобы событие мыши ребенка имело приоритет?

0 голосов
/ 07 февраля 2019

У меня есть следующий код 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()
          }
        }
      }
...