Wistia视频overlay点击播放自动关闭，stopPropagation误用如何解决？

现有蒙层关闭逻辑绑定在.main-overlay-box（外层蒙层容器）上，所有内部元素的点击事件都会向上冒泡到该容器，触发关闭逻辑。Wistia视频播放按钮属于弹窗内部元素，点击后事件冒泡到蒙层容器，就会触发弹窗关闭。

e.stopPropagation()的作用是阻止当前事件继续向上冒泡到父级元素，不会影响当前元素上绑定的其他同类型事件。
你之前把e.stopPropagation()加在蒙层的点击事件回调中，相当于蒙层自身的事件触发后才阻止向上冒泡，完全没有解决「内部元素点击事件冒泡到蒙层触发关闭」的核心问题，还会干扰蒙层自身的关闭逻辑，导致点击蒙层无法关闭弹窗。e.stopImmediatePropagation()除了阻止冒泡外，还会阻止当前元素上绑定的其他同类型事件执行，完全不匹配该场景需求，因此使用后问题回到初始状态。
stopPropagation本身是适合解决该问题的方案，只是你之前的绑定位置错误。

新增逻辑：给所有弹窗的内容容器（.demo-overlay-box）绑定点击事件，阻止内部点击事件冒泡到上层蒙层即可。
修改后的完整JS代码如下：

// demo overlay
let demoButton = document.querySelectorAll('.demo-link-button');
let demoFormOverlay = document.getElementById('demo-overlay');
let demoFormOverlayClose = document.getElementById('demo-overlay-close');
let mainDemoOverlays = document.querySelectorAll('.main-overlay-box');

// video overlay
let demoOnDemandButton = document.querySelectorAll('.vid-overlay-trigger');
let demoOnDemandFormOverlay = document.getElementById('demo-ondemand-overlay');
let demoOnDemandFormOverlayClose = document.getElementById('demo-ondemand-overlay-close');

// 新增：阻止弹窗内容区域的点击事件冒泡到父级蒙层
document.querySelectorAll('.demo-overlay-box').forEach(box => {
  box.addEventListener('click', e => {
    e.stopPropagation();
  });
});

demoButton.forEach(function(elem) {
  elem.addEventListener('click', function(e) {
    e.preventDefault();
    demoFormOverlay.style.display = 'block';
  });
});

demoFormOverlayClose.addEventListener('click', function(e) {
  e.preventDefault();
  demoFormOverlay.style.display = 'none';
});

demoOnDemandButton.forEach(function(elem) {
  elem.addEventListener('click', function(e) {
    e.preventDefault();
    demoOnDemandFormOverlay.style.display = 'block';
  });
});

// multiple overlays
mainDemoOverlays.forEach(function(elem) {
  elem.addEventListener('click', function(e) {
    e.preventDefault();
    demoOnDemandFormOverlay.style.display = 'none';
    demoFormOverlay.style.display = 'none';
  });
});
demoOnDemandFormOverlayClose.addEventListener('click', function(e) {
  e.preventDefault();
  demoOnDemandFormOverlay.style.display = 'none';
});

• 点击半透明蒙层区域：点击事件直接触发在.main-overlay-box元素上，正常执行关闭逻辑
• 点击弹窗内部任意内容（包括Wistia播放按钮、第三方表单、关闭按钮）：点击事件冒泡到.demo-overlay-box时被阻止，不会触发蒙层的关闭逻辑；关闭按钮自身绑定的关闭事件不受冒泡阻止逻辑影响，可正常执行关闭操作

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