点击手风琴组件内图标时绑定的JavaScript事件不生效如何解决？

问题原因 #

事件委托的判断逻辑仅校验点击的直接目标元素e.target是否匹配.js-accordation选择器：

• 点击容器内的文字区域时，直接触发事件的目标就是.js-accordation容器本身，匹配校验通过，逻辑正常执行
• 点击内部.icon图标时，直接触发事件的目标是<i>子元素，不匹配.js-accordation选择器，所以回调函数不会执行

解决方法 #

方案1：修改事件委托匹配逻辑（更通用，兼容性好） #

将匹配逻辑替换为从点击元素向上查找最近的符合选择器的祖先元素，无需调整HTML结构，也不影响子元素后续单独绑定交互：

function addGlobalEventListener(type, selector, callback) {
  document.addEventListener(type, function(e) {
    const matchedEl = e.target.closest(selector);
    if (matchedEl) callback(e, matchedEl);
  });
}


addGlobalEventListener('click', '.js-accordation', function(e, accordionEl) {
  let panel = accordionEl.nextElementSibling;
  accordionEl.classList.toggle('js-accordation_is-active');
  if (panel.style.maxHeight) {
    panel.style.maxHeight = null
  } else {
    panel.style.maxHeight = panel.scrollHeight + 'px';
  }
});

方案2：CSS屏蔽子元素点击事件（实现最简） #

如果图标不需要单独绑定点击事件，可以直接给子元素加样式禁止响应点击，点击图标时的事件目标会直接落到父容器上：

.js-accordation .icon {
  pointer-events: none;
}

内容的提问来源于stack exchange，提问作者Team Carnival