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

【问题标题】：How to get html element without its children in JavaScript?如何在 JavaScript 中获取没有子元素的 html 元素？
【发布时间】：2021-02-17 12:49:35
【问题描述】：

我想得到一个没有子元素的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 变量包含其子项。

【问题讨论】：

如果您不想从孩子的事件中执行事件处理程序，那么您需要防止事件在孩子身上冒泡，或者检查它不是源自的事件处理程序从一个孩子。检索/不检索父母的孩子与这种逻辑无关。
const myFunction = function(event) { event.stopPropagation(); this.classList.add("clicked") } 并将事件绑定到祖父母？
stackoverflow.com/questions/152975/…
这能回答你的问题吗？ Ignoring click event when child of element is clicked

标签： javascript html get element

【解决方案1】：

如果您想忽略所有和任何子点击，请检查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>

【讨论】：