嵌套在.questions元素内的图片点击事件未冒泡至父元素问题

首先明确：事件冒泡是正常生效的，但你的代码逻辑没处理对点击嵌套元素的情况。

问题本质 #

当你点击<dt>内部的图片时，事件确实会从<img>向上冒泡到<dt>、<div>直到document，但event.target始终指向最初被点击的元素（也就是<img>），而不是它的父元素<dt>。你的代码里判断的是event.target.classList.contains('questions')，但<img>并没有questions类，所以if条件永远不会触发，反而会进入else分支把所有<dd>隐藏。

解决方案 #

有两种常用的修复方式：

方法1：使用closest()查找目标父元素

利用Element.closest()方法，从点击的元素出发，向上查找最近的带有questions类的祖先元素，这样不管点击的是<dt>本身还是内部的图片，都能定位到目标<dt>：

document.addEventListener('click', function(event){
  // 查找点击元素最近的.questions祖先
  const targetDt = event.target.closest('.questions');
  if(targetDt){
    const answers = targetDt.nextElementSibling;
    answers.style.display = answers.style.display === "block"? "none" : "block";
  }
  else{
    document.querySelectorAll('dd').forEach(dd => dd.style.display= "none")
  }
});

方法2：直接给<dt>绑定点击事件

把点击事件直接绑定到所有.questions元素上，此时this或者event.currentTarget都会指向<dt>，不管点击的是它内部的哪个子元素：

// 给每个.questions绑定点击事件
document.querySelectorAll('.questions').forEach(dt => {
  dt.addEventListener('click', function(){
    const answers = this.nextElementSibling;
    answers.style.display = answers.style.display === "block"? "none" : "block";
  });
});

// 点击其他区域关闭所有答案
document.addEventListener('click', function(event){
  // 如果点击的元素不在faq-item内部，就关闭所有dd
  if(!event.target.closest('.faq-item')){
    document.querySelectorAll('dd').forEach(dd => dd.style.display= "none")
  }
});

补充说明 #

事件冒泡的核心是事件的传递过程，而event.target是触发事件的原始元素，event.currentTarget才是当前处理事件的元素（也就是绑定事件的那个元素）。你之前的代码把事件绑在document上，currentTarget是document，但你需要的是被点击的<dt>，所以用closest()是最直接的方式。

内容的提问来源于stack exchange，提问作者mob x