防止子组件触发父组件的onClick

Question

Using Material-ui in React, I want to have the <IconButton> to have one behavior with onClick (quickly add to the cart) and have the parent <GridListTile> to have a different onClick behavior (open the more info Dialog for that item). My issue is that when I click on the <IconButton> , it does both actions at the same time (open the more info Dialog AND add to the cart. Is there a way to have <IconButton> to not inherit the onClick from the parent component?

<GridListTile key={tile.title}>
              <img
                src={`/${tile.img}`}
                alt={tile.title}
                onClick={handleClickOpen()}
              />
              <GridListTileBar
                title={tile.title}
                subtitle={<span>{tile.description}</span>}
                onClick={handleClickOpen()}
                actionIcon={
                  <Tooltip title="add to cart">
                    <IconButton
                      aria-label={`info about ${tile.title}`}
                      className={classes.icon}
                      // onClick={handleClickOpen()}
                      onClick={() => {
                        dispatch({ type: "cart-increment" });
                      }}
                    >
                      <AddShoppingCartIcon />
                    </IconButton>
                  </Tooltip>
                }
              />
            </GridListTile>

Answer 1

In the child handler, stop the event from propagating upward:

<IconButton
    aria-label={`info about ${tile.title}`}
    className={classes.icon}
    onClick={(e) => {
        e.stopPropagation();
        dispatch({ type: "cart-increment" });
    }}