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();