javascript - 即使event.target不是指定的元素，if语句也会运行

我的网页上有一个简单的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>

感谢所有帮助，

谢谢。

最佳答案

这行代码有两个问题：

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

首先，||无法测试e.target是否为多个可能值之一。条件的评估如下：

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

第二个问题是modalTrigger[i].children是一个列表。它本身将永远是一个真实的价值。

因此，如果条件始终为真。

如果要测试e.target是modalTrigger[i]还是modalTrigger[i]的后代，我将使用.parentNode属性从e.target向上导航以查看modalTrigger[i]是否是祖先：

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>