event.target triggers input and label elements in js

Question

I am working on a form and in that I am using radio buttons but because of the styling issues i just hides them by display: none property. And done all the styling on its corresponding label element.

<form>
  <div class="radio-input">
    <input type="radio" style="display:none;" name="color" value="green" id="g2" />
    <label class="square-box" for="g2"></label>
    <input type="radio" style="display:none;" name="color" value="blue" id="b2" />
    <label class="square-box not-allowed" for="b2"></label>
  </div>
</form>

Now I have attached and event listener on that parent div and waiting for an event to bubble. But when i click label, event.target returns both label and input element. So that creates a problem.

document
  .querySelector(".radio-input")
  .addEventListener("click", function (event) {
    if (event.target.classList.contains("not-allowed")) {
      // do something...
    } else {
      // do something...
    }
  };

So in this if label has not-allowed class i wanna do some operation but because event.target returns both the elements, addeventlistener runs twice and fails the code(basically if condition).

So the two possible solutions might be

1. just ignore input elements by adding a condition in the if
2. event.target somehow don't return the input element

whatever the solution be please tell me!

Answer 1

As this answer, you can stop default behaviour of the addEventListener like this:

document
    .querySelector(".radio-input")
    .addEventListener("click", function (event) {
        event.preventDefault(); // adding this to your code
        if (event.target.classList.contains("not-allowed")) {
            console.log("not allowed");
        } else {
            console.log("allowed");
        }
    });

Answer 2

You can also ignore input element:

document
  .querySelector(".radio-input")
  .addEventListener("click", function (event) {
    if(event.target.nodeName === 'INPUT')return; // if it's input, just return
    if (event.target.classList.contains("not-allowed")) {
      // do something...
    } else {
      // do something...
    }
  };

Answer 3

As mentioned above preventDefault() or possibly stopimmediatepropagation()