原生JS实现jQuery事件委托 绑定动态模态框swatch元素

jQuery的on方法做事件委托时，会自动沿事件冒泡路径遍历，匹配你传入的目标选择器，最终把匹配到的元素赋值给回调里的e.currentTarget，不会直接返回绑定事件的根元素。
原生JS直接给document绑定事件时默认没有这个匹配逻辑，很容易踩两个坑：

• 直接读取e.currentTarget，拿到的永远是绑定事件的document对象，不可能拿到色板元素
• 直接读取e.target没有做路径匹配，一方面点到色板内部的子元素时拿到的是子节点，另一方面点击模态框外的唤起按钮时也会进入回调，自然会取错元素

直接复用你原有逻辑，和jQuery实现行为完全一致：

// 委托目标选择器，和原有jQuery写法保持一致
const targetSelector = '.modal-desk__content .swatch, .modal-mobile__content .swatch';

document.addEventListener('click', (e) => {
  // 沿冒泡路径向上查找匹配选择器的色板元素
  const swatchEl = e.target.closest(targetSelector);
  // 点击路径上没有匹配的目标元素时直接终止逻辑
  if (!swatchEl) return;

  // 原有业务逻辑
  const swatchValue = swatchEl.dataset.value;
  document.querySelector(`.product-form .swatch[data-value="${swatchValue}"]`)?.click();
  const swatchContainer = swatchEl.closest('.swatches');
  swatchContainer.querySelectorAll('.swatch').forEach(item => {
    item.classList.remove('selected');
  });
  swatchEl.classList.add('selected');
});

• 必须用*closest()*做元素匹配，不要直接判断e.target.matches(targetSelector)：如果色板内部有图标、文本等子节点，点击子节点时e.target是子元素而非色板本身，直接判断会失效
• 拦截判断if (!swatchEl) return会自动过滤所有不符合条件的点击：不管是点唤起模态框的按钮、点模态框其他区域、点页面其他位置的色板，只要不在目标模态框内，都不会执行后续逻辑
• 这种委托写法不需要等模态框动态插入完成再绑定事件，不管模态框什么时候插入DOM，点击时都能正确响应，不会出现漏绑、重复绑定的问题

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