侦听某些父元素和某些子元素之间的事件

Question

我有一个覆盖整个窗口的模态，但这仅是因为需要将.open.modal上设置的模态的背景变暗。 HTML看起来像这样：

<div class="modals">
  <div class="open modal">
    <div class="modal_inner">
      <div class="white">
        <div class="x"><img src="/assets/meeting/close.png"></div>
        <div class="all">
            <!-- ALL CONTENT HERE -->
        </div>
      </div>
    </div>
  </div>
  <div class="open modal">
    <!-- OTHER MODAL CAN BE OPEN ON TOP -->
  </div>
</div>

当用户在.white （ .open.modal或更高版本）外部.white ，我想关闭模式。

我如何注册一个Javascript事件，如果在父级（在这种情况下为body或波纹管）和子级（在这种情况下为.white ）之间单击，将触发该事件？

我在React中有这个。

Answer 1

有两种标准方法可以解决此问题：

多个处理程序

1. 钩子click .open.modal并在那里做真正的工作

2. 挂钩click上.white和起泡预防，所以网上的点击.white没有达到.open.modal ，因而不会触发其处理程序

因此，例如：

handleOpenModalClick(event) {
    // Do the work
}
handleWhiteClick(event) {
    event.stopPropagation();
}

例：

 class Example extends React.Component { handleOpenModalClick(event) { // Do the work console.log("Do it"); } handleWhiteClick(event) { event.stopPropagation(); } render() { return ( <div> <div className="open modal" onClick={this.handleOpenModalClick}> <div className="white" onClick={this.handleWhiteClick}> xxx </div> </div> </div> ); } } ReactDOM.render( <Example />, document.getElementById("react") ); 

 .open.modal { background: #ccc; padding: 20px; } .white { background: white; } 

 <div id="react"</div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 

收到事件后过滤事件

用钩子click .open.modal ，然后在接收到时检查event.target和.open.modal之间的元素，并检查是否存在.white 。 如果是这样，请不要做。

handleClick(event) {
    let node = event.target;
    while (node && node !== event.currentTarget) {
        if (node.classList.contains("white")) {
            return; // Skip it
        }
    }
    // Do the work
}

例：

 class Example extends React.Component { handleClick(event) { let node = event.target; while (node && node !== event.currentTarget) { if (node.classList.contains("white")) { return; // Skip it } } // Do the work console.log("Do it!"); } render() { return ( <div> <div className="open modal" onClick={this.handleClick}> <div className="white"> xxx </div> </div> </div> ); } } ReactDOM.render( <Example />, document.getElementById("react") ); 

 .open.modal { background: #ccc; padding: 20px; } .white { background: white; } 

 <div id="react"</div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>