为什么父级的onClick会在子级的onChange之前触发？

Question

我的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();
  }

当我点击复选框的时候，它就会启动... handleRowClick 也在母公司 Div. 即使我有一个 stopPropagation() 中的子函数。 然而，当我记录时，它在子函数（复选框）之前调用父函数，所以我可以看到为什么 stopPropagation() 是不行的。

有没有更好的方法？ 还是说在做任何事情之前，我必须先检查被点击的元素是什么类型。 例如，在父级点击函数中，如果 "目标 "是一个复选框，就不要做任何事情。 这似乎是一种黑客行为，而不是正确的处理方式。

Answer 1

很有可能点击复选框会触发一个 "点击 "事件，这个事件正在向div冒泡。所以你可能想在它冒泡之前捕获输入的点击事件。

不如试试这个。

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

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

这段代码显示了事件的顺序。点击复选框会产生这些事件的顺序。

输入点击div点击输入更改

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

Answer 2

当然，点击事件会被击中.因为复选框被包裹在一个已经有点击事件的div中，而且点击事件比onChange更有优先级，为了处理这里的逻辑，你必须使用

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