时间戳

首页 > 解决方案 > 如何使用 event.target 获取元素的子元素

javascript - 如何使用 event.target 获取元素的子元素

问题描述

我正在尝试让 div 的子元素切换类“活动”

JS

    const dots = document.querySelectorAll('[data-dots]');
    dots.forEach(dot => dot.addEventListener('click', handleClick));

    function handleClick(e) {
     e.target.getElementsByClassName('tb-drop').classList.toggle('active');
     console.log(e.target.getElementsByClassName('tb-drop'))
    }

HTML

       <div class="dots" data-dots>
         <i class="fas fa-ellipsis-v dots"></i>
         <div class="tb-drop">
            <i class="far fa-edit icon-grid"></i>
            <i class="fas fa-link icon-grid"></i>
         </div>
       </div>

所以我选择了所有具有 data-dots 属性的 div，然后选择该 div 的子元素并添加活动类。我尝试使用 e.target.children 但没有奏效。

谢谢，我只是想学习:)

标签： javascriptecmascript-6

解决方案

为了识别第一个孩子，最简单的选择是简单地使用Element.querySelector()代替Element.getElementsByClassName()：

const dots = document.querySelectorAll('[data-dots]');
dots.forEach(dot => dot.addEventListener('click', handleClick));

function handleClick(e) {
  // Element.querySelector() returns the first - if any -
  // element matching the supplied CSS selector (element,
  // elements):
  e.target.querySelector('.tb-drop').classList.add('active');
}

当然，问题是如果没有找到匹配的元素，Element.querySelector()那么它会返回null; 这是您的脚本将引发错误的地方。因此，考虑到这一点，在尝试修改元素之前检查元素是否存在是有意义的：

const dots = document.querySelectorAll('[data-dots]');
dots.forEach(dot => dot.addEventListener('click', handleClick));

function handleClick(e) {
  let el = e.target.querySelector('.tb-drop');
  if (el) {
    el.classList.add('active');
  }
}

还值得注意的是，EventTarget.addEventListener()将this元素传递给函数，而不是使用：

e.target.querySelector(...)

完全可以简单地写：

this.querySelector(...)

当然，除非handleClick()被重写为箭头函数。

演示：

const dots = document.querySelectorAll('[data-dots]');
dots.forEach(dot => dot.addEventListener('click', handleClick));

function handleClick(e) {
  let el = e.target.querySelector('.tb-drop');
  if (el) {
    el.classList.add('active');
  }
}
div {
  display: block;
  border: 2px solid #000;
  padding: 0.5em;
}

i {
  display: inline-block;
  height: 1em;
}

::before {
  content: attr(class);
}

.active {
  color: limegreen;
}
<div class="dots" data-dots>
  <i class="fas fa-ellipsis-v dots"></i>
  <div class="tb-drop">
    <i class="far fa-edit icon-grid"></i>
    <i class="fas fa-link icon-grid"></i>
  </div>
</div>

或者，如果您希望切换“活动”类，您可以改为toggle()使用add：

const dots = document.querySelectorAll('[data-dots]');
dots.forEach(dot => dot.addEventListener('click', handleClick));

function handleClick(e) {
  let el = e.target.querySelector('.tb-drop');
  if (el) {
    el.classList.toggle('active');
  }
}
div {
  display: block;
  border: 2px solid #000;
  padding: 0.5em;
}

i {
  display: inline-block;
  height: 1em;
}

::before {
  content: attr(class);
}

.active {
  color: limegreen;
}
<div class="dots" data-dots>
  <i class="fas fa-ellipsis-v dots"></i>
  <div class="tb-drop">
    <i class="far fa-edit icon-grid"></i>
    <i class="fas fa-link icon-grid"></i>
  </div>
</div>

参考：

推荐阅读