event.targetが指定された要素でなくても文が実行されているif文

Question

ユーザーがページ上の特定のボタンをクリックするたびにモーダルを開くはずの私のWebページには簡単なscriptがあります。

しかし、何らかの理由で、イベントターゲットが指定された要素でない場合でも、モーダルオープンを引き続きトリガーします。明らかに、これは起こるはずではありません。私はそれがなぜなのか混乱しています。ここで

はJavaScriptのです：

document.onclick = function(e){ 
    var modalTrigger = document.querySelectorAll(".ts-modal__trigger"), 
     modals = document.querySelectorAll(".ts-modal"), 
     i; 

    for(i = 0; i < modalTrigger.length; i++){ 
     if(e.target == modalTrigger[i] || modalTrigger[i].children){ 
      modal = document.getElementById(modalTrigger[i].getAttribute("data-activemodal")); 

      // these two will trigger not matter if the if statement is true 
      document.body.style.overflow = "hidden"; 
      modal.style.display = "block"; 
     } 
    } 
} 

そして、これはHTMLです：

<!-- trigger !--> 
<a class="ts-modal__trigger" data-activemodal="ts-main-feed_status-comments-overlay"> 
    <span data-rot="11">11</span> 
</a> 
<!-- modal !--> 
<div class="ts-modal" id="ts-main-feed_status-comments-overlay"></div> 

すべてのヘルプは高く評価され、

感謝。

Answer 1

はあなたのコード行には二つの問題があります。

まず ||が e.targetは、複数の可能な値のいずれかであるかどうかをテストするために ない作業を行い

if(e.target == modalTrigger[i] || modalTrigger[i].children) 

。条件は次のように評価されます。

(e.target == modalTrigger[i]) || modalTrigger[i].children 

第二の問題は、modalTrigger[i].childrenがリストであるということです。それは常に真実の価値そのものになります。

if条件は常にtrueです。

あなたはe.targetはどちらかである私はそれを行うだろうmodalTrigger[i]またはmodalTrigger[i]の子孫の方法はmodalTrigger[i]が祖先であるかどうかを確認するためにe.targetからアップナビゲートする.parentNodeプロパティを使用するかどうかをテストする場合：

function containsChild(parent, child) { 
 
    while (child != null) { 
 
    if (parent === child) return true; 
 
    child = child.parentNode; 
 
    } 
 
    return false; 
 
} 
 

 
document.onclick = function(e){ 
 
    var modalTrigger = document.querySelectorAll(".ts-modal__trigger"), 
 
     modals = document.querySelectorAll(".ts-modal"), 
 
     i; 
 

 
    for(i = 0; i < modalTrigger.length; i++){ 
 
     if(e.target == modalTrigger[i] || containsChild(modalTrigger[i], e.target)) { 
 
      modal = document.getElementById(modalTrigger[i].getAttribute("data-activemodal")); 
 
      // these two will trigger not matter if the if statement is true 
 
      document.body.style.overflow = "hidden"; 
 
      modal.style.display = "block"; 
 
     } 
 
    } 
 
}

.ts-modal { display: none; }

<!-- trigger !--> 
 
<a class="ts-modal__trigger" data-activemodal="ts-main-feed_status-comments-overlay"> 
 
    <span data-rot="11">This is a span in a trigger element</span> 
 
</a><br> 
 
<a>This is not a trigger</a> 
 
<!-- modal !--> 
 
<div class="ts-modal" id="ts-main-feed_status-comments-overlay">This is the overlay</div>