为什么子元素属性会传递到父 <tr> 元素的 onClick 事件（React）中？

Question

我有一个有多行的表。每行都有一个 onClick 属性，该属性调用类的 handleClick 方法。每个都有多个子元素。所有子元素都没有 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

JavaScript 中的事件冒泡和事件传播称为事件冒泡。请检查一下。所以发生的事情是，事件被传递给父母，像这样：冒泡会影响直到父级（即 body）的所有元素。这里有事件目标，它将包含触发该事件的元素。在您的情况下，它可能是单击的TD或INPUT或LABEL。停止冒泡您可以根据场景使用以下任一方法来停止从触发元素到上述父元素或子元素的事件传播：event.stopPropagation(); event.stopImmediatePropagation();

Answer 2

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