Только одно событие при нажатии ярлыка с вводом

Question

Мне нужно 1 событие вместо 2 каждый раз, когда я нажимаю свой label

Возможно ли это без выбора самого ввода document.querySelector('label input') или / и только с CSS?

Запустите приведенный ниже пример и проверьте консоль фрагмента, переключаясь между двумя шагами, чтобы увидеть 2 события.

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>

Answer 1

Вы почти у цели, попробуйте то, что @Ashley Brown прокомментировал в своем сообщении, и используйте то, о чем вы написали pointer-events, чтобы избежать одного и того же события снова и снова, если оно уже проверено.

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>

Надеюсь, это поможет или, по крайней мере, укажет вам правильное направление :)

Answer 2

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>

Answer 3

Если я вас правильно понял, вы можете добавить идентификаторы и использовать querySelector следующим образом:

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)