javascript - 监听某个父元素和某个子元素之间的事件

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 或以上)时，我想关闭模式。

如何注册一个 Javascript 事件，如果在父级(在本例中为 body 或波纹管)和子级(在本例中为 .white)之间单击，该事件将触发？

我在 React 中有这个。

Answer 1

有两种标准方法可以实现它:

多个处理程序

1. Hook 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>

收到事件后过滤

钩住.open.modal上的click，收到后，检查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>