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

Question

我正在尝试让 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 但没有用。

谢谢，我只是想学习:)

Answer 1

为了识别第一个孩子，最简单的选择就是使用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) {
  // Element.querySelector() returns the first - if any -
  // element matching the supplied CSS selector (element,
  // elements):
  e.target.querySelector('.tb-drop').classList.add('active');
}

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');
  }
}

e.target.querySelector(...)

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

this.querySelector(...)

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;
}

参考：

• Element.querySelector