Estoy trabajando en un form y en eso estoy usando botones de opción, pero debido a los problemas de estilo, simplemente los oculto por display: none propiedad. Y hecho todo el estilo en su elemento de label correspondiente.
<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> Ahora he adjuntado un detector de eventos en ese div principal y estoy esperando que se produzca un evento. Pero cuando hago clic en la label , event.target devuelve tanto la etiqueta como el elemento de entrada . Entonces eso crea un problema.
document .querySelector(".radio-input") .addEventListener("click", function (event) { if (event.target.classList.contains("not-allowed")) { // do something... } else { // do something... } }; Entonces, en esto, si la label no tiene una clase permitida , quiero hacer alguna operación, pero debido a que event.target devuelve ambos elementos, addeventlistener se ejecuta dos veces y falla el código (básicamente if la condición).
Así que las dos posibles soluciones podrían ser
input agregando una condición en el ifinputcualquiera que sea la solución por favor dígame!
Como esta respuesta , puede detener el comportamiento predeterminado de addEventListener de esta manera:
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"); } });También puede ignorar el elemento 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... } };Como se mencionó anteriormente, preventDefault() o posiblemente stopimmediatepropagation()