javascript - Event.target 检查发生得太快

Question

没有 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>