如何在JavaScript中获取没有子元素的html元素？

问题描述

我想获取一个没有子元素的html元素，在其上设置事件addEventListener（“ click），以便该函数仅在单击时才执行，而不是在其子元素上执行。我只能使用Javascript 。这可能吗？

const divs = document.querySelectorAll("div");
const body = document.querySelector("body");

const myFunction = function() {
  this.classList.add("clicked")
}
divs.forEach(function(element) {
  element.addEventListener("click",myFunction)
});

.grandparent {
  padding: 20px;
  border: 5px solid black;
}

.parent {
  padding: 20px;
  border: 5px solid blue;
}

.child {
  padding: 20px;
  height: 100px;
  width: 100px;
  border: 5px solid yellow;
}

.clicked {
  background-color: red;
}

<div data-time="3000" class="grandparent">
  <div data-time="2000" class="parent">
    <div data-time="1000" class="child"></div>
  </div>
</div>

此函数为每个div添加一个类，现在我想在div之外单击以删除该类，但是body变量包含其子类。

解决方法

如果您想忽略所有子点击，请检查currentTarget与事件的target是否不同。

• target是事件起源的元素（接收事件的最深的孩子）
• currentTarget是附加事件处理程序的元素

const divs = document.querySelectorAll("div");
const body = document.querySelector("body");

const myFunction = function(event) {
  if (event.target === event.currentTarget) {
    this.classList.add("clicked")
  }
}
divs.forEach(function(element) {
  element.addEventListener("click",myFunction)
});

.grandparent {
  padding: 20px;
  border: 5px solid black;
}

.parent {
  padding: 20px;
  border: 5px solid blue;
}

.child {
  padding: 20px;
  height: 100px;
  width: 100px;
  border: 5px solid yellow;
}

.clicked {
  background-color: red;
}

<div data-time="3000" class="grandparent">
  <div data-time="2000" class="parent">
    <div data-time="1000" class="child"></div>
  </div>
</div>