javascript - 单击功能在子 div 中不起作用，在返回内部做出反应

Question

我有这个反应代码，其中 onClick 似乎没有在子 div 上工作。但是它在父 div 上运行良好。这是我所指的确切代码。

https://github.com/AgoraIO-Community/OpenAgoraWeb-React/blob/master/src/components/AgoraVideoCall/index.jsx

这让我感到困惑，这是怎么发生的？为什么返回的子 div 在 onClick 上不起作用？这背后的原因是什么？onClick on div "ag-canvas" 正在工作，但在其中的任何 div 上都没有。

componentDidMount() {
    // add listener to control btn group
    let canvas = document.querySelector('#ag-canvas')
    canvas.classList.add('active');
    let btnGroup = document.querySelector('.ag-btn-group')
    canvas.addEventListener('mousemove', () => {
        if (global._toolbarToggle) {
            clearTimeout(global._toolbarToggle)
        }
        btnGroup.classList.add('active')
        global._toolbarToggle = setTimeout(function () {
            btnGroup.classList.remove('active')
        }, 2000)
    })
}

render() {
    const exitBtn = (
        <span
          onClick={this.handleExit}
          className={this.state.readyState ? 'ag-btn exitBtn' : 'ag-btn exitBtn disabled'}
          title="Exit">
          <i className="ag-icon ag-icon-leave"></i>
        </span>
    )

    return (
        <div id="ag-canvas"   style={style}>
            <div className="navbarVideoCalling">
                <div onClick={this.backIcon} className="back_icon">
                    <img src={back_icon} />
                </div>
                <div onClick={()=>console.log("working")} className="liveheader">
                    <span>Live</span>
                </div>
            </div>
            <div className="ag-btn-group">
                {exitBtn}
            </div>
        </div>
    )
}