单击时保持 wistia 覆盖打开 - e.stopPropogation 在外部框上以防止其关闭 - stopPropagation 误解

Question

我有一些叠加层，一个是表格，另一个是视频嵌入。

当您与它交互时，表单叠加层保持打开状态（我不能 post 表单，因为它是嵌入和机密）但视频关闭：

// 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');
  
  
  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 {
    display: none;
    position: fixed;
    overflow: scroll;
    top: 0;
    left: 0;
    z-index: 900;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 56%);
}

<a class="demo-link-button" href="#">Open Overlay</a>
<a class="demo-link-button"  href="#">Open Overlay</a>
<a class="vid-overlay-trigger"  href="#">Open THE VIDEO Overlay</a>
<a class="vid-overlay-trigger"  href="#">Open THE VIDEO Overlay</a>

<div class="main-overlay-box" id="demo-overlay">
  <div class="demo-overlay-box">
    <a id="demo-overlay-close" href="#">X</a>
    <div style="background-color: #fff;">
      heres one overlay
    </div>
  </div>    
</div>

<div class="main-overlay-box" id="demo-ondemand-overlay">
  <div class="demo-overlay-box">
    <a id="demo-ondemand-overlay-close" href="#">X</a>
    <script src="//fast.wistia.com/embed/medias/s3lqfi0zn7.jsonp" async></script>
<script src="//fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_embed wistia_async_s3lqfi0zn7" style="height:349px;width:620px">&nbsp;</div>
  </div>    
</div>

当您点击“打开视频覆盖”并尝试播放视频时...它不会保持打开状态。

逻辑在这里：

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

然后我发现它在冒泡，所以我把它改成了：

// 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');
  
  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();
      e.stopPropogation();
      demoOnDemandFormOverlay.style.display = 'none';
      demoFormOverlay.style.display = 'none';
    });
  });
  demoOnDemandFormOverlayClose.addEventListener('click', function(e) {
    e.preventDefault();
    demoOnDemandFormOverlay.style.display = 'none';
  });

.main-overlay-box {
    display: none;
    position: fixed;
    overflow: scroll;
    top: 0;
    left: 0;
    z-index: 900;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 56%);
}

<a class="demo-link-button" href="#">Open Overlay</a>
<a class="demo-link-button"  href="#">Open Overlay</a>
<a class="vid-overlay-trigger"  href="#">Open THE VIDEO Overlay</a>
<a class="vid-overlay-trigger"  href="#">Open THE VIDEO Overlay</a>

<div class="main-overlay-box" id="demo-overlay">
  <div class="demo-overlay-box">
    <a id="demo-overlay-close" href="#">X</a>
    <div style="background-color: #fff;">
      heres one overlay
    </div>
  </div>    
</div>

<div class="main-overlay-box" id="demo-ondemand-overlay">
  <div class="demo-overlay-box">
    <a id="demo-ondemand-overlay-close" href="#">X</a>
    <script src="//fast.wistia.com/embed/medias/s3lqfi0zn7.jsonp" async></script>
<script src="//fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_embed wistia_async_s3lqfi0zn7" style="height:349px;width:620px">&nbsp;</div>
  </div>    
</div>

但是现在，当我点击透明的黑色区域时，模态框不会关闭。

这是为什么？

https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases. It does not, however, prevent any default behaviors from occurring; for instance, clicks on links are still processed. If you want to stop those behaviors, see the preventDefault() method. It also does not prevent immediate propagation to other event-handlers. If you want to stop those, see stopImmediatePropagation().

于是我尝试了

// 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');
  
  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();
      e.stopImmediatePropagation();
      demoOnDemandFormOverlay.style.display = 'none';
      demoFormOverlay.style.display = 'none';
    });
  });
  demoOnDemandFormOverlayClose.addEventListener('click', function(e) {
    e.preventDefault();
    demoOnDemandFormOverlay.style.display = 'none';
  });

.main-overlay-box {
    display: none;
    position: fixed;
    overflow: scroll;
    top: 0;
    left: 0;
    z-index: 900;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 56%);
}

<a class="demo-link-button" href="#">Open Overlay</a>
<a class="demo-link-button"  href="#">Open Overlay</a>
<a class="vid-overlay-trigger"  href="#">Open THE VIDEO Overlay</a>
<a class="vid-overlay-trigger"  href="#">Open THE VIDEO Overlay</a>

<div class="main-overlay-box" id="demo-overlay">
  <div class="demo-overlay-box">
    <a id="demo-overlay-close" href="#">X</a>
    <div style="background-color: #fff;">
      heres one overlay
    </div>
  </div>    
</div>

<div class="main-overlay-box" id="demo-ondemand-overlay">
  <div class="demo-overlay-box">
    <a id="demo-ondemand-overlay-close" href="#">X</a>
    <script src="//fast.wistia.com/embed/medias/s3lqfi0zn7.jsonp" async></script>
<script src="//fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_embed wistia_async_s3lqfi0zn7" style="height:349px;width:620px">&nbsp;</div>
  </div>    
</div>

但现在我们又回到了起点。

如何保持 wistia 嵌入视频打开以播放点击，并保持关闭按钮和点击它的功能？ stopPropogation() work/how 在这种情况下应该如何工作？

或者我错了 stopPropogation() 这里的概念不正确？

Answer 1

如果我没理解错的话，你想要这个吗（到目前为止仅在视频示例中）？

// 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');


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';
});

document.querySelector(".wistia_embed").addEventListener("click", e => {
  e.preventDefault();
  e.stopPropagation();
});

.main-overlay-box {
  display: none;
  position: fixed;
  overflow: scroll;
  top: 0;
  left: 0;
  z-index: 900;
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0 / 56%);
}

<a class="demo-link-button" href="#">Open Overlay</a>
<a class="demo-link-button" href="#">Open Overlay</a>
<a class="vid-overlay-trigger" href="#">Open THE VIDEO Overlay</a>
<a class="vid-overlay-trigger" href="#">Open THE VIDEO Overlay</a>

<div class="main-overlay-box" id="demo-overlay">
  <div class="demo-overlay-box">
    <a id="demo-overlay-close" href="#">X</a>
    <div style="background-color: #fff;">
      heres one overlay
    </div>
  </div>
</div>

<div class="main-overlay-box" id="demo-ondemand-overlay">
  <div class="demo-overlay-box">
    <a id="demo-ondemand-overlay-close" href="#">X</a>
    <script src="//fast.wistia.com/embed/medias/s3lqfi0zn7.jsonp" async></script>
    <script src="//fast.wistia.com/assets/external/E-v1.js" async></script>
    <div class="wistia_embed wistia_async_s3lqfi0zn7" style="height:349px;width:620px">&nbsp;</div>
  </div>
</div>

单击时保持 wistia 覆盖打开 - e.stopPropogation 在外部框上以防止其关闭 - stopPropagation 误解

keep wistia overlay open on click - e.stopPropogation on outside box preventing it from closing - stopPropgation misunderstanding

javascript

overlay

stoppropagation