如何防止模态点击？答案

【问题标题】：How to prevent modal click-through?如何防止模态点击？
【发布时间】：2019-12-14 18:45:53
【问题描述】：

我有一个看起来像这样的模态：

<div className="modal modal-focuser" tabindex="1" style="z-index: 5;">
  <div className="handle-modal-close"></div>
  <div className="modal-content modal-content">
    <div className="body">
      <span>
        <div className="container">
          <div className="title-text">Title Text</div>
          <div className="body-text">Body Text</div>
        </div>
        <button onClick={this.toggleView} className="toggle-view">Switch View</button>
      </span>
    </div>
  </div>
</div>

点击代码如下：

toggleView = e => {
  e.stopPropagation();

  this.setState(prevState => ({ view: !prevState.view}));
}

但由于某种原因（尽管停止传播），当我单击按钮时，有时父级的事件处理程序仍处于激活状态。

也就是说，模态框后面有一个表格，里面有可点击的行，当我点击模态框里的切换按钮时，不仅点击了那个按钮，还有后面的表格行后面（也有自己的点击事件处理程序）

奇怪的是，这只是偶尔发生，而且只发生在移动设备上。尽我所能，我无法在 Chrome 或 Firefox 中复制我的 PC 上的行为。

这可能是什么原因造成的？

【问题讨论】：

标签： javascript css reactjs modal-dialog event-bubbling

【解决方案1】：

您正在使用onclick 处理程序，它基本上忽略了通过向下事件进行的所有传播。尝试使用onmousedown。模态下方的事物可能具有向下或向上事件。了解“冒泡”：What is event bubbling and capturing?

<button onMouseDown={this.toggleView} ... yada yada

使用 mousedown 可以防止在stopPropegation 中冒泡，还可以查看stopImmediatePropegation -- 这可以防止调用相同类型的其他侦听器（单击、向下、向上）：https://developer.mozilla.org/en-US/docs/Web/API/Event/stopImmediatePropagation

【讨论】：