javascript - 来自两个脚本的作品只有一个

Question

我试图用两个不同的脚本来解决这个问题，我不知道为什么第二个脚本可以工作而第一个脚本不能。然后我删除第二个脚本，第一个开始工作。也许您会找到解决方案。

<script>
  // Get the modal
  var modal = document.getElementById('popupBoxOnePosition');
  var modal2 = document.getElementById('popupBoxTwoPosition');
  var modal3 = document.getElementById('popupBoxThreePosition');
  var modal4 = document.getElementById('popupBoxFourPosition');

  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
      if (event.target == modal) {
            $('.iframe1')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
          modal.style.display = "none";
      }
      if (event.target == modal2) {
                    $('.iframe2')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
          modal2.style.display = "none";
      }
      if (event.target == modal3) {
                    $('.iframe3')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
          modal3.style.display = "none";
      }
      if (event.target == modal4) {
                    $('.iframe4')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
          modal4.style.display = "none";
      }
  }
  </script>
    
    
  <script>
        
  var exit = document.getElementById('close1');

  window.onclick = function(event) {
      if (event.target == exit) {
       $('.iframe1')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
          modal.style.display = "none";
      }
  }
  </script>

Answer 1

是的，因为您有两个 onClick 处理程序，因此只有其中一个可以工作(它们会相互覆盖)

将逻辑移到一个 onClick 处理程序中。

window.onclick = function(event) {
  if (event.target == exit) {
    ...
  }
  if (event.target == modal) {
    ...
  }
}