javascript - 为什么要将子元素属性传递给父 元素的 onClick 事件(React)？

Question

我有一个包含多行的表格。每行都有一个调用类 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还单击了通常为黑色 的子项，并且还单击了任何子项的节点名称 TD 或 INPUT 或 LABEL。我的事件触发器发生了什么？

Answer 1

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

这是一个动画:

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

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

停止冒泡

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

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

要了解更多差异，请查看 stopPropagation vs. stopImmediatePropagation .