Нажатие на метку ввода вызывает два щелчка

Метка является вложенным элементом, каждый элемент вызывает событие.

На вопрос о том, как его предотвратить, уже есть ответ [здесь] (jQuery Клик срабатывает дважды при нажатии на ярлык)

Первый щелчок связан с меткой, второй - с соответствующим вводом. Как вы можете видеть, после нажатия на метку фокус устанавливается на входе. Если вы удалите ввод, второй щелчок не будет срабатывать. Это нормальное поведение браузера.

Вы можете предотвратить это с помощью event.preventDefault();.

document.addEventListener(`click`, onClick)

var counter = 0;

function onClick(event) {
  event.preventDefault();
  ++counter;
  console.log(counter);
}

label {
  display: block;
  background-color: lightgrey;
  margin: 5px 0 5px;
}

<input id='input'>
<label for='input'>I belong to input</label>
<label>I belong to no one</label>

Вам нужно использовать event.preventDefault();, чтобы запретить click для следующего элемента, который будет вызывать щелчок по умолчанию, который является элементом input в вашем случае. Но обратите внимание, что это предотвратит щелчок для всех элементов в цепочке, что в конечном итоге заблокирует цепочку click, которая может потребоваться для других элементов.

document.addEventListener(`click`, onClick)

var counter = 0;

function onClick(event) {
  event.preventDefault();
  ++counter
  console.log(counter)
}

label {
  display: block;
  background-color: lightgrey;
  margin: 5px 0 5px;
}

<input id='input'>
<label for='input'>I belong to input</label>
<label>I belong to no one</label>