Question

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

这行代码存在两个问题：

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

首先，||执行工作以测试e.target是否是多个可能值之一。条件评估如下：

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

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

所以你的if条件总是如此。

如果您想测试e.target是modalTrigger[i]还是modalTrigger[i]的后代，我将采用.parentNode属性进行导航e.target以查看modalTrigger[i]是否为祖先：

＆＃13;

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

＆＃13;

.ts-modal { display: none; }

＆＃13;

<!-- 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>

＆＃13;

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

1 个答案: