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

Question

我有一个包含复选框的 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();
}

Answer 1

使用 addEventListener 附加事件监听器相反 - 内联处理程序有 way too many problems值得在现代代码库中使用。要附加监听器，请选择 .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>

您可以考虑使用 <label>而不是<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>