event.target 触发 js 中的 input 和 label 元素

Question

我正在使用form 并使用radio 按钮，但由于样式问题，我只是通过display: none 属性隐藏 它们。并在其对应的label 元素上完成所有样式设置。

<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>

现在我已在该父 div 上附加了事件侦听器并等待事件冒泡。但是当我点击label 时，event.target 返回 label 和 input 元素。所以这就产生了问题。

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

因此，如果 label 有 not-allowed 类，我想做一些操作，但因为 event.target 返回两个元素，addeventlistener 运行两次并且代码失败（基本上是if条件）。

所以两种可能的解决方案可能是

1. 只需在if 中添加条件即可忽略input 元素
2. event.target 不知何故不返回 input 元素

无论是什么解决方案，请告诉我！

Answer 1

作为this answer，您可以像这样停止 addEventListener 的默认行为：

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

你也可以忽略input元素：

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

如上所述 preventDefault() 或可能 stopimmediatepropagation()