如何防止模态点击？

瑞安·佩舍尔

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

<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 上的行为。

什么可能导致这种情况？

鲍勃

您正在使用onclick处理程序，它基本上忽略了通过向下事件的所有传播。尝试使用onmousedown. 模态下面的东西可能有向下或向上事件。了解“冒泡”：什么是事件冒泡和捕获？

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。