为什么父 onClick 在子 onChange 之前触发答案

【问题标题】：Why does parent onClick trigger before child onChange为什么父 onClick 在子 onChange 之前触发
【发布时间】：2020-05-08 16:47:00
【问题描述】：

我的 React 项目中有基本的 HTML，如下所示：

<div
  onClick={(e) => this.handleRowClick(e, id)}>
  <p>
    <input
      type="checkbox"
      onChange={this.handleSelectOneChange} />
  </p>
</div>

JS：

  handleRowClick(event, item_id) {
     // do stuff
  }

  handleSelectOneChange(event) {
    event.stopPropagation();
  }

当我点击复选框时，它也会在父 Div 中触发 handleRowClick。即使我在子函数中有一个stopPropagation()。但是，当我登录时，它会在子（复选框）函数之前调用父函数，因此我可以看到为什么 stopPropagation() 不起作用。

有没有更好的方法来做到这一点？还是我只需要在执行任何操作之前检查单击了哪种类型的元素。例如，在父点击功能中，如果“目标”是一个复选框，则不要执行任何操作。这似乎是一种黑客行为，而不是处理这个问题的正确方法。

【问题讨论】：

只是猜测，但也许复选框单击会在更改事件之前产生单击事件。您可能必须向输入添加 onclick 并阻止其传播。

标签： javascript reactjs dom onclick onchange

【解决方案1】：

点击复选框很可能会触发一个冒泡到 div 的“点击”事件。因此，您可能希望在输入点击事件冒泡之前捕获它。

试试这个怎么样：

<input
  type="checkbox"
  onClick={this.handleCheckboxClick}
  onChange={this.handleSelectOneChange} />

this.handleCheckboxClick(evt) {
  event.stopPropagation();
}

这个 sn-p 显示了事件的顺序。单击复选框会按以下顺序生成这些事件：

点击输入
div 点击
输入 onchange

<div onclick="console.log('div onclick');">
  Checkbox:
  <input type="checkbox"
    onclick="console.log('input onclick');"
    onchange="console.log('input onchange');" />
</div>

【讨论】：

简单但很棒的解决方案，这对我帮助很大，谢谢！

【解决方案2】：

点击事件肯定会命中。因为复选框被包装在一个已经有点击事件的 div 中，并且点击事件的优先级高于 onChange，所以要处理这里的逻辑，你必须使用

e.target.id or e.target.name 以识别元素。

【讨论】：