Je veux 1 événement au lieu de 2 chaque fois que je clique sur mon label

Est-ce possible sans sélectionner l'entrée elle-même document.querySelector('label input') ou / et avec CSS uniquement?

Exécutez l'exemple ci-dessous et vérifiez la console d'extraits de code tout en basculant entre les deux étapes pour voir les 2 événements.

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 juin 2020 à 02:26

3 réponses

Meilleure réponse

Vous y êtes presque, essayez ce que @Ashley Brown a commenté dans son message et utilisez ce que vous avez écrit sur pointer-events pour éviter le même événement encore et encore s'il est déjà coché.

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>

J'espère que cela vous aidera ou du moins vous orientera dans la bonne direction :)

1
gengns 17 juin 2020 à 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 juin 2020 à 23:45

Si je vous comprends bien, vous pouvez ajouter des identifiants et utiliser querySelector de cette façon:

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 juin 2020 à 23:53