Javascript 当简单单击事件处理程序工作时，为什么event.target不会激发以下代码？

下面是代码

（功能（窗口）{
var form=document.getElementById（'form_element'），
form2=document.getElementById（'form_element2'），
container=document.getElementById（'container'）；
window.addEventListener（'mouseup'，getAlert）；
函数getAlert（事件）{
如果（event.target==表单）{
警报（“我点击了表单”）；
}
}
form2.addEventListener（'单击'，函数（））{
container.innerHTML='我正在工作'；
});
})（窗口）
#容器{
高度：400px；
宽度：400px；
背景：红色；
}
#form_元素{
显示：内联块；
}

这里有些东西
问题是当
鼠标向上移动时，
目标
是
输入元素
，而不是
表单

window.addEventListener("mouseUp", getAlert);
function getAlert(event) {
    if (event.target === form || form.contains(event.target)) {
        alert('I clicked on a form');
    }
}

这里有一些方法可以解决你的问题

检查
目标
是否为
输入元素

window.addEventListener("mouseUp", getAlert);
function getAlert(event) {
    if (event.target === form.firstElementChild) {
        alert('I clicked on a form');
    }
}


将
侦听器
添加到
表单
中，这样就不需要检查任何内容

form.addEventListener("mouseUp", getAlert);
function getAlert(event) {
    alert('I clicked on a form');
}


检查
目标
是否为
表单
或
目标
是否为
表单
的
元素

window.addEventListener("mouseUp", getAlert);
function getAlert(event) {
    if (event.target === form || form.contains(event.target)) {
        alert('I clicked on a form');
    }
}


使用
CSS
向
表单添加一些
填充
，这样您就可以有空间单击
表单
，而无需单击
输入

#form_element {
    padding: 20px;
}


使用
CSS
使
输入元素对鼠标“不可见”

#form_element>input {
    pointer-events: none;
}


@杰夫：没问题，那你选择哪种方法呢？我用的是包含方法尼克。这有助于防止单击DIV中的子元素后关闭下拉容器。不过，我有一个问题。如何正确选择div中的所有子元素。我认为在原生jquery$sign中选择所有子元素，在JS中返回一个数组。但是，如何选择JS中的所有子元素和子元素。@jeff请尝试此
文档。querySelector（“#form_element*”）
，它将返回一个数组，其中包含
form_element
中的每个子元素，感谢您的反馈。很好的一天