如何防止模态点击？

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

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

也就是说，模态后面有一个 table 可以点击的行，当我点击模态中的 Toggle 按钮时，不仅那个按钮被点击了，而且也后面的table行后面（也有自己的点击事件处理程序）

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

可能是什么原因造成的？

Answer 1

您正在使用 onclick 处理程序，它基本上忽略了通过向下向上事件的所有传播。尝试使用 onmousedown。模态下面的东西很可能有向下或向上事件。了解 "bubbling" : 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

如何防止模态点击？

How to prevent modal click-through?

javascript

css

reactjs

modal-dialog

event-bubbling