如何防止模式点击进入？

Question

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

<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}));
}

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

即，模态后面有一张表格，其中有可点击的行，当我单击模态中的切换按钮时，不仅单击了该按钮，还也后面的表格行（也有自己的click事件处理程序）

奇怪的是，这仅有时发生，并且仅在移动设备上发生。请尝试，无法在PC上的Chrome或Firefox中复制行为。

可能是什么原因造成的？

Answer 1

您正在使用onclick处理程序，该处理程序实际上会忽略向下事件产生的所有传播。尝试使用onmousedown。可能是模态下发生向下或向上事件的事物。了解有关“冒泡”的信息：What is event bubbling and capturing?