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

Question

我在Paper组件中有IconMenu组件。 我想阻止内部组件上的点击事件的传播（IconMenu）。 这就是我想出的，没有明显的结果（我也尝试用onTouchTap,onMouseUp代替onClick，效果相同）：_iconMenuClick方法从不调用。

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

_iconMenuClick(event) { 
    MenuItem.onClick(event); 
    event.stopPropagation(); 
} 

Answer 1

解决方法建议如下：

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 
    ... 
} 

Answer 2

对于停止顶部节点气泡事件:-) event.stopPropagation(); event.preventDefault();