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) {
    ...
  }
}

Answer 2

您正在覆盖onclick函数。尝试改用addEventlistener。

window.addEventListener('click', function(event) {
    // your first function
});

window.addEventListener('click', function(event) {
    // your second function
});

所以在你的情况下。

<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.addEventListener('click', 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.addEventListener('click', function(event) {
  if (event.target == exit) {
    $('.iframe1')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
    modal.style.display = "none";
  }
});
</script>

Answer 3

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

  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
       if (event.target == exit) {
       $('.iframe1')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
          modal.style.display = "none";
      }
      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>

  You can try this

Answer 4

您的所有if语句都应这样保留在window.onclick内...

var modal = document.getElementById('popupBoxOnePosition');
  var modal2 = document.getElementById('popupBoxTwoPosition');
  var modal3 = document.getElementById('popupBoxThreePosition');
  var modal4 = document.getElementById('popupBoxFourPosition');

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";
      }

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

Answer 5

您分配了window.onClick 两次，第二个分配覆盖了第一个分配，因此好像第一个分配不存在。

您可以改用addEventListener：

// First script
window.addEventListener('click', function() {...});

// Second script
window.addEventListener('click', function() {...});

工作演示：

window.addEventListener('click', function() { console.log(1); });
window.addEventListener('click', function() { console.log(2); });

从两个脚本中只能看到一个

5 个答案: