Quiero 1 evento en lugar de 2 cada vez que hago clic en mi label

¿Es posible sin seleccionar la entrada en sí document.querySelector('label input') o / y solo con CSS?

Ejecute el siguiente ejemplo y verifique la consola de fragmentos mientras cambia entre los dos pasos para ver los 2 eventos.

document.querySelector('label:first-of-type').onclick = e => console.log(e.target)
document.querySelector('label:last-of-type').onclick = e => console.log(e.target)
label {
  cursor: pointer;
  color: grey;
  font-size: large;
}

input[type=radio] {
  display: none;
}

input[type=radio]:checked ~ * {
  color: blue;
  font-weight: bold;
}
<label><input type="radio" name="step"><span>Step 1</span></label>
<label><input type="radio" name="step"><span>Step 2</span></label>
0
Johnny Johnny 17 jun. 2020 a las 02:26

3 respuestas

La mejor respuesta

Ya casi estás allí, prueba lo que @Ashley Brown comentó en su publicación y usa lo que escribiste sobre pointer-events para evitar el mismo evento una y otra vez si ya está marcado.

document.querySelector('label:first-of-type span').onclick = e => console.log(e.target)
document.querySelector('label:last-of-type span').onclick = e => console.log(e.target)
label {
  cursor: pointer;
  color: grey;
  font-size: large;
}

input[type=radio] {
  display: none;
}

input[type=radio]:checked ~ * {
  color: blue;
  font-weight: bold;
  pointer-events: none;
}
<label><input type="radio" name="step"><span>Step 1</span></label>
<label><input type="radio" name="step"><span>Step 2</span></label>

Espero que esto ayude o al menos te indique la dirección correcta :)

1
gengns 17 jun. 2020 a las 00:18
document.querySelector('label:first-of-type').onclick = e => console.log(e.target)
document.querySelector('label:last-of-type').onclick = e => console.log(e.target)

document.querySelectorAll('label span').forEach(el => el.onclick = e => e.stopPropagation() )
document.querySelectorAll('label input').forEach(el => el.onclick = e => e.stopPropagation() )
label {
  cursor: pointer;
  color: grey;
  font-size: large;
border:1px solid;
padding:10px;
}

input[type=radio] {
  display: none;
}

input[type=radio]:checked ~ * {
  color: blue;
  font-weight: bold;
}
<label><input type="radio" name="step"><span>Step 1</span></label>
<label><input type="radio" name="step"><span>Step 2</span></label>
1
Ashley Brown 16 jun. 2020 a las 23:45

Si lo entiendo correctamente, es posible que desee agregar identificadores y usar querySelector de esta manera:

Html:

<label><input id='first' type="radio" name="step"><span>Step 1</span></label
<label><input id='last' type="radio" name="step"><span>Step 2</span></label>

Js:

document.querySelector('#first').onclick = e => console.log(e.target)
document.querySelector('#last').onclick = e => console.log(e.target)
0
Jacob Paine 16 jun. 2020 a las 23:53