hide/show divをトグルするとボタン上で動作しますが、リンク上で動作しませんか？

Question

リンクをクリックすると特定のdivを表示したり隠したりできますが、コードを使用する場合にのみコードが機能します。なぜこれが起こっているのですか？どうすれば修正できますか？ここで

私のコードされています。また、ここではcodepenためのリンクです

.popup { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.popup-content { 
 
    display: none; 
 
    position: absolute; 
 
\t width: 1000px; 
 
    
 
} 
 

 
.show { 
 
    display:block; 
 
} 
 

 

<div class="popup"> 
 

 
    <button onclick="showPopup()" class="btnPopup thePopup">POPUP FROM BUTTON</button> 
 
    
 
    <a class="linkStyle thePopup" onclick="javascript:showPopup()" href="#" return false;>POPUP FROM LINK</a> 
 

 

 
    <div id="myPopup" class="popup-content" style="border:1px; border-style:solid; margin:10px; padding: 10px;width:200px;"> 
 

 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quasi voluptas impedit. Culpa impedit? 
 

 
    </div> 
 
</div> 
 

 
<script> 
 
    /* When the user clicks on the button, 
 
    toggle between hiding and showing the dropdown content */ 
 
    function showPopup() { 
 
     event.preventDefault(); 
 
     document.getElementById("myPopup").classList.toggle("show"); 
 
     return false; 
 
    } 
 

 
    // Close the dropdown if the user clicks outside of it 
 
    window.onclick = function(event) { 
 
     if (!event.target.matches('.thePopup')) { 
 

 
      var dropdowns = document.getElementsByClassName("popup-content"); 
 
      var i; 
 
      for (i = 0; i < dropdowns.length; i++) { 
 
       var openDropdown = dropdowns[i]; 
 
       if (openDropdown.classList.contains('show')) { 
 
        openDropdown.classList.remove('show'); 
 
       } 
 
      } 
 
     } 
 
    } 
 
</script>

： http://codepen.io/ZlatinaNyagolova/pen/LkOgzk

UPDATE：

私は別のクラスを追加しましたボタンとリンク私の終了関数でそのクラスをリスナーで使用しました。これはそれを修正しました！ :)

Answer 1

ポップアップが正常に開きますが、ポップアップを閉じる機能が原因です。

イベントターゲットが「.btnPopup」と一致しない限り、つまりボタンがクリックされていない限り、ウィンドウ全体の「onclick」機能にリスナーを関連付けてポップアップを閉じます。

だから何が起こっていることは次のとおりです。

1. あなたは、ボタンをクリックして、その「onclickの」機能は、ポップアップを示し、ウィンドウの「onclickの」関数が実行されますが、イベントターゲットが一致しているので何もしません " .btnPopup '
2. リンクをクリックすると、その "onclick"機能がポップアップを表示し、ウィンドウの "onclick"機能が実行され、イベントタグセットが.btnPopupに一致しないので、ポップアップがすぐに閉じられます。

ボタンやリンクの両方に別のクラスを追加すると「何か」がポップアップを開くには、クリックされたかどうかを確認するためにあなたのwindow.onclickリスナーにそのクラスを使用して：

<button onclick="showPopup()" class="btnPopup Popup">POPUP FROM BUTTON</button> 
<a class="linkStyle Popup" onclick="showPopup()" href="#">POPUP FROM LINK</a> 
... 
window.onclick = function(event) { 
    if (!event.target.matches('.Popup')) { 
     //Proceed with closing the popup 

Answer 2

のみ、このようなコードを変更：

window.onclick = function(event) { 
     if (!event.target.matches('.btnPopup')&& !event.target.matches('.linkStyle')) {