时间戳

首页 > 解决方案 > 使 querySelector 仅针对单击的此元素？

javascript - 使 querySelector 仅针对单击的此元素？

问题描述

我有一个包含一个复选框的 div，我只想让 querySelector 定位这个被点击元素的子元素。截至目前，如果我点击下面的那个，它将触发点击上面的复选框。我怎样才能做到这一点？

HTML

<div class="message-checkbox-container" style="height: 47px;" onclick="triggerCheck()">
     <input class="message-checkbox" type="checkbox">
</div>
<div class="message-checkbox-container" style="height: 47px;" onclick="triggerCheck()">
     <input class="message-checkbox" type="checkbox">
</div>

Javascript

function triggerCheck(){
document.querySelector('.message-checkbox').click();
}

标签： javascriptjqueryhtmlcss

解决方案

改为使用附加事件侦听器addEventListener- 内联处理程序有太多问题，值得在现代代码库中使用。要附加侦听器，请选择.message-checkbox-container元素，您可以在每个元素上使用闭包来引用侦听器内部的第一个子元素，即输入：

for (const container of document.querySelectorAll('.message-checkbox-container')) {
  container.addEventListener('click', () => {
    container.children[0].click();
  });
}
<div class="message-checkbox-container" style="height: 47px;">container
     <input class="message-checkbox" type="checkbox">
</div>
<div class="message-checkbox-container" style="height: 47px;">container
     <input class="message-checkbox" type="checkbox">
</div>

并不是说您应该这样做，但是您可以this在内联处理程序中引用以获取对处理程序附加到的元素的引用 - 您可以将其传递给函数并对其进行函数调用querySelector（或.children[0]）：

function triggerCheck(elm) {
  elm.querySelector('.message-checkbox').click();
}
<div class="message-checkbox-container" style="height: 47px;" onclick="triggerCheck(this)">container
  <input class="message-checkbox" type="checkbox">
</div>
<div class="message-checkbox-container" style="height: 47px;" onclick="triggerCheck(this)">container
  <input class="message-checkbox" type="checkbox">
</div>

您可以考虑使用 a<label>而不是 a <div>，这样在单击标签时复选框将自动切换，无需 Javascript：

.message-checkbox-container {
  display: block;
  cursor: pointer;
}
<label class="message-checkbox-container" style="height: 47px;">container
  <input class="message-checkbox" type="checkbox">
</label>
<label class="message-checkbox-container" style="height: 47px;">container
  <input class="message-checkbox" type="checkbox">
</label>

推荐阅读