How to handle events on the extra space in a flexbox?-CodePudding

How to handle the events when someone clicks(mouse click) on the violet color space around the elements ? Putting a general onclick on the container is overriding the individual item behaviors (they all have their internal onclick handlers). Any other way to solve this ?

Edit:

<Grid onClick={ClickHandler} container direction="row">
  <Grid item>
    // Filter Screen that has buttons, checkboxes
  </Grid>
  <Grid item>
    ............
  </Grid>
</Grid>

The problem here is the container ClickHandler just overrides all the clickhandlers that the filter screen has. So that tactic was not successful.

CodePudding user response：

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases. It does not, however, prevent any default behaviors from occurring; for instance, clicks on checkboxes are still processed.

<Grid onClick={ClickHandler} container direction="row">
  <Grid item onClick={(e) => e.stopPropagation()}>
    // Filter Screen that has buttons, checkboxes
  </Grid>
  <Grid item>
    ............
  </Grid>
</Grid>

Hope this helped ;)

CodePudding user response：

I have an idea that I think will work, but I'm not sure is the best approach or follows best practices. I would make use of the data- attributes on your components. Add an attribute like data-element="container" to your parent container. If event.target.dataset.element === "container" in your click handler, then you've clicked the background around the elements, otherwise you've clicked one of the elements. If necessary, you can also add data-element="componentN" to each of your components inside the container and move your logic for the onClick effects for your individual components inside there.