为什么子元素属性会传入父 <tr> 元素的 onClick 事件（React）？答案

【问题标题】：Why are child element properties passed into parent <tr> element's onClick event (React)?为什么子元素属性会传入父 <tr> 元素的 onClick 事件（React）？
【发布时间】：2021-03-06 13:50:16
【问题描述】：

我有一个多行表。每行都有一个调用类handleClick 方法的onClick 属性。每个都有多个子元素。没有一个子元素具有 onClick 属性，因此它们不应触发 handleClick 方法。

代码如下：

...

export class EventRow extends Component {

    ...

    handleClick = (e) => {
        e.preventDefault();
        console.log(e.target.id);
        console.log(e.target.nodeName);
    }

    ...

    render () {
        return (
            <tr id = { "tr" + this.props.eventdefinition.event_id } className = "noselect" onClick = { this.handleClick.bind(this) }>
                <td className = "noselect">{this.props.eventdefinition.event_name}</td>
                <td>
                <div className = "custom-control custom-checkbox tdDiv noselect">
                    <input type="checkbox" className = "custom-control-input" id = { "customCheck" + this.props.eventdefinition.event_id } readOnly checked = {this.props.eventdefinition.recurring} />
                    <label className = "custom-control-label" htmlFor = {"customCheck" + this.props.eventdefinition.event_id}></label>
                </div>
                </td>
                <td>
                <div className = "custom-control custom-switch tdDiv noselect">
                    <input type="checkbox" className = "custom-control-input" id = { "customSwitch" + this.props.eventdefinition.event_id } checked = {this.props.eventdefinition.active_for_generation} onChange = { this.onChange }/>
                    <label className = "custom-control-label" htmlFor = {"customSwitch" + this.props.eventdefinition.event_id}></label>
                </div>
                </td>
            </tr>
        );
    }
}

...

现在你可以看到在handleClick方法中有两条console.log语句。当我点击我的行时，我希望在我的控制台中我会得到一个 id，例如tr3 和一个节点名称TR，但是我得到的任何孩子的 id 也被点击，通常是黑色的 @987654325 @，以及任何子节点的名称也被点击了TD 或INPUT 或LABEL。我的事件触发器发生了什么？

【问题讨论】：

我应该注意，有一个非常简单的解决方案可以解决我的问题，即使用单击的任何子元素来确定单击了哪一行，但这更像是一种 hack，并不能解决我的问题对孩子触发 onClick 的原因感到困惑。
它叫做Event Bubbling in JavaScript and Event Propagation。请检查一下。

标签： javascript reactjs onclick

【解决方案1】：

它叫做Event Bubbling in JavaScript and Event Propagation。请检查一下。所以发生的事情是，事件被传递给父母，就像这样：

这是一个动画：

冒泡会影响到父元素（即body）之前的所有元素。这里有事件目标，它将包含触发此事件的元素。在您的情况下，它可能是点击的TD 或INPUT 或LABEL。

您还可以在 Event Handling 上阅读更多相关信息。

停止冒泡

您可以根据场景使用以下任一方法来阻止事件从触发元素传播到上述父级或子级：

event.stopPropagation();
event.stopImmediatePropagation();

如需了解更多差异，请查看stopPropagation vs. stopImmediatePropagation。

【讨论】：

哦，我明白了，从您添加到解决方案的链接看来，我可以使用 e.currentTarget 而不是 e.target。
@FlamePrinz 对！而且我还添加了一个解释，以防您不希望事件冒泡。请检查更新的答案。 ?

【解决方案2】：

你可以通过调用event.stopPropagation();来防止这种情况发生，这是因为点击事件通过DOM树传播，触发了父元素的点击事件。

【讨论】：