没有 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"> kr</span>
</span><i>caption</i></span>
</label>
</h3>
<div class="description"></div>
</li>
我该怎么做?
最佳答案
我对此进行了更多调查,发现这并不像我想象的那么容易,但仍有可能。在此编辑中值得注意:
- 我已经稍微缩短了您的
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"> kr</span>
</span><i>caption</i></span>
</label>
</h3>
<div class="description"></div>
</li>
关于javascript - Event.target 检查发生得太快,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50614274/