为了账号安全,请及时绑定邮箱和手机立即绑定

为什么子元素属性会传递到父 <tr> 元素的 onClick 事件(React)中?

为什么子元素属性会传递到父 <tr> 元素的 onClick 事件(React)中?

哆啦的时光机 2023-08-24 18:02:01
我有一个有多行的表。每行都有一个 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。我的事件触发器发生了什么?
查看完整描述

2 回答

?
慕森卡

TA贡献1806条经验 获得超8个赞

JavaScript 中的事件冒泡和事件传播称为事件冒泡。请检查一下。所以发生的事情是,事件被传递给父母,像这样:

https://img4.sycdn.imooc.com/64e72ac000018e1305250151.jpg

冒泡会影响直到父级(即 body)的所有元素。这里有事件目标,它将包含触发该事件的元素。在您的情况下,它可能是单击的TDINPUTLABEL

停止冒泡

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

event.stopPropagation();
event.stopImmediatePropagation();
查看完整回答
反对 回复 2023-08-24
?
ABOUTYOU

TA贡献1812条经验 获得超5个赞

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



查看完整回答
反对 回复 2023-08-24
  • 2 回答
  • 0 关注
  • 115 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信