Проверка Event.target происходит слишком быстро

Question

NO jQuery

В настоящее время я проверяю, нажал ли пользователь за элемент.Однако, когда console.log вызывает event.target, я вижу, что один щелчок происходит на 2 элементах (один - элемент ввода, а другой - метка).Сначала отображается элемент метки, в результате чего функция думает, что нажатие не произошло на элементе ввода, и, следовательно, щелчок произошел за пределами элемента, но это не так.

Причина, по которой я хочу проверить,печать находилась вне элемента ввода, а не надписи, потому что есть <span> и другие элементы, которые срабатывают при нажатии.

Мой код пока:

document.addEventListener("click", function(event) {checkChecked(event); });

function checkChecked(inputEvent) {
    if(inputElement !== inputEvent.target && !inputElement.contains(inputEvent.target)) {
        console.log("click outside");
    }
}

И HTML:

<li class="payment-shipping-method checked">
    <h3>
        <input type="radio" name="paymentMethodId" id="payment-method-7-radio" class="payment-method" value="7" checked="">
        <label for="payment-method-7-radio">
            <span class="figure"><b><img src="img" alt=""></b></span>
            <span class="caption">caption<span class="price zero">
            <span class="amount">0</span>
            <span class="currency">&nbsp;kr</span>
            </span><i>caption</i></span>
        </label>
    </h3>
    <div class="description"></div>
</li>

Как я могу это сделать?

Answer 1

Я посмотрел на это немного больше и обнаружил, что это не так просто, как я думал, но все же возможно.Примечательно, что в этом редакторе:

• Я немного сократил вашу строку addEventListener.Поскольку checkChecked принимает один аргумент event, как и все обработчики событий, мы можем просто ссылаться на него напрямую.
• Я пытался использовать inputEvent.target.closest("label"), чтобы получить ближайшего label предка выбранного элемента,но по какой-то причине это не сработало во фрагменте.Я включил быстрое восстановление функциональности в функции getClosest.
• Я также включил несколько дополнительных журналов, когда пользователь нажимает на ярлык и когда пользователь нажимает на ввод.Из этих журналов видно, что нажатие на метку также генерирует событие щелчка для ввода ...

document.addEventListener("click", checkChecked);

var inputElement = document.getElementById("payment-method-7-radio");

// For some reason, while I was building this snippet, 
// I found the native Element.closest function was not 
// working, and built this substitute
function getClosest(fromElement, toSelector) {
  if (fromElement.matches(toSelector)) {
    return fromElement;
  }
  if (fromElement === document.documentElement) {
    return null;
  }
  return getClosest(fromElement.parentElement, toSelector);
}

function checkChecked(inputEvent) {

  var closestLabel = getClosest(inputEvent.target, "label");
  if (inputElement !== inputEvent.target && 
      (!closestLabel || closestLabel.getAttribute("for") !== inputElement.id)) {
    console.log("click outside");
    return;
  }
  if (inputElement === inputEvent.target) {
    console.log("clicked element");
  }
  if (closestLabel && closestLabel.getAttribute("for") === inputElement.id) {
    console.log("clicked label");
  }
}

<li class="payment-shipping-method checked">
  <h3>
    <input type="radio" name="paymentMethodId" id="payment-method-7-radio" class="payment-method" value="7" checked="">
    <label for="payment-method-7-radio">
      <span class="figure"><b><img src="img" alt=""></b></span>
      <span class="caption">caption<span class="price zero">
      <span class="amount">0</span>
      <span class="currency">&nbsp;kr</span>
      </span><i>caption</i></span>
    </label>
  </h3>
  <div class="description"></div>
</li>

Answer 2

вы добавляете прослушиватель в документ, поэтому при любом нажатии будет вызываться обратный вызов

замените первую строку этим и не забудьте изменить селектор

document.querySelector('yourInputsSelector').addEventListener('click', checkChecked)