javascript - 为什么父级 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();
  }

当我单击该复选框时，它也会在父 Div 中触发 handleRowClick。即使我在子函数中有一个 stopPropagation() 。但是，当我登录时，它会在子(复选框)函数之前调用父函数，这样我就可以明白为什么 stopPropagation() 不起作用。

有更好的方法吗？或者我只需要在执行任何操作之前检查正在单击的元素类型。例如，在父单击函数中，如果“目标”是复选框，则不执行任何操作。这似乎是一种黑客行为，而不是处理此问题的正确方法。

Answer 1

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

试试这个怎么样:

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

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

此片段显示了事件的顺序。单击该复选框会按以下顺序生成这些事件:

input onclick
div onclick
input onchange

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