Javascript 单击事件不处理内部标记元素

这就是我正在使用的标记

<div class="checkout-row__form-column__billing">
  <div class="checkout-row__form-column__billing__title billing-collapse collapse-btn">
     <div class="checkout-row__form-column__billing__title__arrow">
       <i class="fa fa-chevron-right" aria-hidden="true"></i>
     </div>
   <h2>1. Billing Details</h2>
</div>
<div class="checkout-row__form-column__shipping__content shipping-collapse-content collapse-target"></div>
<div class="checkout-row__form-column__shipping">
  <div class="checkout-row__form-column__shipping__title shipping-collapse collapse-btn">
     <div class="checkout-row__form-column__shipping__title__arrow">
       <i class="fa fa-chevron-right" aria-hidden="true"></i>
     </div>
   <h2>2. Shipping Details</h2>
</div>
<div class="checkout-row__form-column__shipping__content shipping-collapse-content collapse-target"></div>

有了这些代码，如果我不点击

I

元素或

h2

，我就能够切换类。如何编写JavaScript？如果我单击

e.target

中的任何位置，将触发该事件

---

非常感谢各位同事的帮助。

您的代码只检查

事件.target

是否为

.collapse btn

元素。您还需要检查单击的元素是否是

.collapse btn

元素的子元素

为了获得所需的结果，您可以使用这两个条件来检查

事件.target

是否为

折叠btn

或其任何后代。要检查子元素，请使用通用选择器

*

parent.addEventListener('click', (e) => {
  if (
       e.target.matches('.collapse-btn') || 
       e.target.matches('.collapse-btn *')
  ) {
     // code
  }
});

演示 以下代码段显示了一个示例：

const parent=document.querySelector（'.container'）；
parent.addEventListener（'click'，e=>{
如果(
e、 target.matches（“.collapse btn”）||
e、 target.matches（“.collapse btn*”）
) {
parent.classList.toggle（'active'）；
}
});
.container{
背景：#eee；
宽度：120px；
高度：120px；
}
.container.active{
边框：2倍实心；
}
.崩溃btn{
背景：#999；
填充：10px；
}
.坍塌btn跨度{
背景:#fc3；
字体大小：1.3rem；
光标：指针；
}

点击
Yousaf，谢谢你的回答，最后一种方法确实有效！
parent.addEventListener('click', (e) => {
  if (
       e.target.matches('.collapse-btn') || 
       e.target.matches('.collapse-btn *')
  ) {
     // code
  }
});