使用 JavaScript 为目标元素及其子元素实现背景颜色

Question

我有一个 HTML 元素的层次结构，我希望当鼠标左键单击此层次结构中的某个元素时，只有该特定元素的背景颜色应该改变。我想为每个元素使用不同的背景颜色。我有多个 CSS 类来更改背景颜色。 我正在尝试使用 JavaScript 事件处理将这些 css 类动态添加到这些 HTML 元素中。

当我执行此代码并在 id 为“outer-container”的元素上执行鼠标左键单击时，深绿色背景色不仅会应用于该 id 为“outer-container”的元素，而且还会应用于其子元素。类似地，如果我左键单击 id 为“inner-container”的元素，它的红色背景颜色将被实现到它及其子元素。而我希望背景颜色仅应用于接收左键单击事件的元素，而不应用于其任何子元素或任何父元素。

我尝试使用 event.stopPropagation 来停止冒泡/捕获事件。但问题仍然存在。请建议我在这里做错了什么以及我怎样才能实现我的目的？

const outerContainer = document.getElementById("outer-container");
const innerContainer = document.getElementById("inner-container");
const innerButton1Container = document.getElementById("inner-button-1-container");
const innerButton1 = document.getElementById("inner-button1");
const innerButton2Container = document.getElementById("inner-button2-container");
const innerButton2 = document.getElementById("inner-button2");

const mouseDownHandler = (targetElement, classToAdd) => {
  console.log(`Left Press Down happened in ${targetElement.id}.`);
  targetElement.classList.add(classToAdd, "white-font");
}

outerContainer.addEventListener('mousedown', (event) => {
  let classToAdd = "dark-green-background";
  mouseDownHandler(event.target, classToAdd);
  event.stopPropagation();
}, false);

innerContainer.addEventListener('mousedown', (event) => {
  let classToAdd = "dark-red-background";
  mouseDownHandler(event.target, classToAdd);
  event.stopPropagation();
}, false);

.dark-green-background {
  background-color: #006614;
}
.dark-red-background {
  background-color: #9b0303;
}
/* and many more colors */

.white-font {
  color: white;
}
div {
  padding-left: 1em;
}

  <div id="outer-container" class="container">
    This text is in the outer container.
    <div id="inner-container" class="container">
      This text is in the inner container.
      <div id="inner-button1-container" class="container">
        This is inner button 1 container.
        <button id="inner-button1" class="button">Inner Button 1</button>
      </div>
      <div id="inner-button2-container" class="container">
        This is inner button 2 container.
        <button id="inner-button2" class="button">Inner Button 2</button>
      </div>
      This text is just before the inner container is ending.
    </div>
    This text is again in the outer container.
  </div>

Answer 1

正如@James 和@Bergi 所建议的，我错过了div 的默认背景是透明的这一事实。我将

background-color: white;

和

color: black;

添加到“容器”类属性中，它解决了子元素的可见性问题。