0

3 buttons in a single div with no gap or marginI have a parent div that acts as a container for three full-width, adjacent buttons (with no gaps in the HTML structure). I've added a single click event listener to the parent div to handle clicks on any of the buttons using event delegation.

However, when a user clicks precisely on the visual gap or border between the buttons, the click event still registers on the parent div, but the event.target is the div itself, not a button. This leads to my code trying to process an "undefined" button choice.

Is there a more elegant or robust solution, perhaps using a different event, a CSS technique, or a different JavaScript pattern altogether? The "ignore" method works (ignoring the event with if condition), but I'm curious if there's a way to architect this so the gaps simply aren't clickable, or if there's a best practice I'm missing for this common UI pattern.

Improve this question
3
  • 1
    Please make a minimal reproducible example using the snippet editor Commented Nov 9 at 8:55
  • 1
    The matches method used on the event.target might be useful. Commented Nov 10 at 4:37
  • "if there's a way to architect this so the gaps simply aren't clickable" - pointer-events: none on the container div, pointer-events: auto on the buttons. Commented Nov 11 at 7:25
Related questions
768
How to force child div to be 100% of parent div's height without specifying parent's height?
1
Event listener for when child of parent is clicked
348
Is there a way to make a child DIV's width wider than the parent DIV using CSS?
Load 4 more related questions Show fewer related questions

0

Reset to default

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.