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

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 ?

enter image description here

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.

htmlcssreactjsflexboxmaterial-uijenkinsbuildparameterized


Solution 1:[1]

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.

Solution 2:[2]

See Launching a build with parameters section in Parameterized Build:

http://server/job/myjob/buildWithParameters?token=TOKEN&REQUESTED_ACTION=greeting

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 gloo
Solution 2 Arun Kumar B

Related Questions