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

Question

没有 jQuery

我目前正在检查用户是否在元素之外按下。但是，当console.logging时event.target，我看到单击 2 个元素（一个是输入元素，另一个是标签）。label 元素首先显示，这导致函数认为输入元素上没有发生按下，因此点击发生在元素外部，但事实并非如此。

我想检查按下是否在输入元素之外而不是标签之外的原因是因为<span>单击时会触发 's 和其他元素。

到目前为止我的代码：

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>

我怎样才能做到这一点？

标签： javascriptclick

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>