Material-ui:如何在嵌套组件中停止单击事件的传播

Material-ui: How to stop propagation of click event in nested components

本文关键字：单击 事件 传播 组件 嵌套 Material-ui      更新时间：2023-09-26

我在Paper组件中有一个IconMenu组件。我想防止单击事件在内部组件（IconMenu）上传播。这就是我想出的，没有显着的结果（我也尝试用 onTouchTap 代替 onClick，onMouseUp具有相同的效果）：永远不会调用 _iconMenuClick 方法。

render() {
     return (
         <Paper onClick={this._onClick}>
             <IconMenu iconButtonElement={iconButtonElement} onClick={this._iconMenuClick}>
                 {menuItems}
             </IconMenu>
         </Paper>
     );
}
_iconMenuClick(event) {
    MenuItem.onClick(event);
    event.stopPropagation();
}

除了使用event.stopPropagation();需要注意的是，它应该在onClick事件处理程序中编写。

我犯了一个错误，即将其编写在onChange事件处理程序中，但这不起作用。

我在这里找到了解决方案

编辑：

<ListItem button onClick={this.handleListItemClick}>
-       <Checkbox onChange={this.handleCheckboxChange} />
+       <Checkbox onClick={this.handleCheckboxChange} />
      </ListItem>

用于停止顶部节点气泡事件 ：-） event.stopPropagation(); event.preventDefault();

我建议的解决方法如下：

render() {
     return (
         <Paper onClick={this._onClick}>
             <IconMenu iconButtonElement={iconButtonElement}>
                 {menuItems}
             </IconMenu>
             ...
         </Paper>
     );
}
_onClick(event){
    if(event.target.innerText==""){ //Or any condition that distinguish the IconMenu from the Paper element
        event.stopPropagation();
        return 0;
    }
    //continue with normal behaviour
    ...
}
相关文章：