如果您只是将颜色作为数据属性添加到按钮上，这将容易得多。

document.addEventListener("click", function(e){
    const ctaBtn = e.target.closest(".btn[data-color]"); 

    if(ctaBtn){
      console.log(ctaBtn.dataset.color);
    }

});

.container{
   display:flex;
   flex-wrap:wrap;
   justify-content:space-evenly;
}
.box{
   border:1px solid black;
   padding:5px;
}

<div class="container">
  <div class="box">
    <div>
      <h1>Red</h1>
    </div>
    <div>
      <button class="btn" data-color="red">CTA</button>
    </div>
  </div>
  <div class="box">
    <div>
      <h1>Green</h1>
    </div>
    <div>
      <button class="btn" data-color="green">CTA</button>
    </div>
  </div>
<div class="box">
    <div>
      <h1>Blue</h1>
    </div>
    <div>
      <button class="btn" data-color="blue">Blue</button>
    </div>
  </div>
</div>

有多种方法可以完成您想做的事情，您可以访问父级并获取子级或引用同级
一个一个三个一个一个一个一个一个四个一个一个一个一个一个五个一个

使用closest是正确的，但是您要做的是找到包含.box（而不是.btn）的最近的元素，然后从那里找到框中的h1元素以从中获取文本：

const box = e.target.closest(".box"); 
const h1 = box && box.querySelector("h1");

if (h1) {
    alert(h1.textContent);
}

x一个一个一个一个x一个一个二个一个x一个一个三个一个

还有另一种，但更复杂的方法：

const elements = document.querySelectorAll('.box');

for (let i = 0; i < elements.length; i++) {
    let curr = elements[i];
    curr.onclick = () => {
        alert(curr.firstElementChild.firstElementChild.innerText);
    }
}