JavaScriptで外部をクリックしたときにポップアップが閉じないようにする

Question

私のウェブサイトのJSコードに問題があるので質問があります。 Jsファイルに7つのポップアップを作成し、そのファイルをindex.phpに添付しました。私はそれらのすべてを使用する場合にのみ、最後は（フラグメント）

のindex.phpを働いている

      <div id="popupBox_1"> 
          <div class="popupBoxWrapper"> 
           <div class="popupBoxContent"> 
            <h3>Popup 1</h3> 
            <p>Obecnie przeglądasz okienko 1</p> 
           </div> 
          </div> 
         </div> 

         <div id="popupBox_2"> 
          <div class="popupBoxWrapper"> 
           <div class="popupBoxContent"> 
            <h3>Popup 2</h3> 
            <p>Obecnie przeglądasz okienko 2</p> 
           </div> 
          </div> 
         </div> 

         <div id="popupBox_3"> 
          <div class="popupBoxWrapper"> 
           <div class="popupBoxContent"> 
            <h3>Popup 3</h3> 
            <p>Obecnie przeglądasz okienko 3</p> 
           </div> 
          </div> 
         </div> 

popup.js

window.onclick = function(event) { 
     if (event.target == popupBox_1) { 
      popupBox_1.style.display = "none"; 
     } 
    } 

    window.onclick = function(event) { 
     if (event.target == popupBox_2) { 
      popupBox_2.style.display = "none"; 
     } 
    } 

    window.onclick = function(event) { 
     if (event.target == popupBox_3) { 
      popupBox_3.style.display = "none"; 
     } 
    } 

は、私はこれらのポップアップを作り、彼らが正しく動作している（フラグメント）ユーザーが外部ポップアップをクリックしたときに閉じたいので、jsでその関数を作成しました。そして、それは私が定義した最後のもの（私はpopupBox_3を意味する）のために働いていて、私はそれらをすべて働かせたい！

私はあなたの助けが必要です！

Answer 1

Node.onclickを使用して複数のクリックイベントハンドラを割り当てることはできません。そのたびに最後のイベントハンドラを上書きします。あなたは

window.addEventListener('click', function() { 
    if (event.target == popupBox_1) { 
     popupBox_1.style.display = "none"; 
    } 
}); 

window.addEventListener('click', function() { 
    if (event.target == popupBox_2) { 
     popupBox_2.style.display = "none"; 
    } 
}); 

...etc. 

からスイッチができた。しかし、それだけでワンクリックハンドラにすべての3つの条件を移動するために多くの理にかなって：

window.onclick = function(event) { 
    if (event.target == popupBox_1) { 
     popupBox_1.style.display = "none"; 
    } 
    if (event.target == popupBox_2) { 
     popupBox_2.style.display = "none"; 
    } 
    if (event.target == popupBox_3) { 
     popupBox_3.style.display = "none"; 
    } 
}