Javascript EventListener显示错误的目标

我有以下JS代码

var existingMenus = document.getElementsByClassName('multiSelectMenu');
for (var i = 0; i < existingMenus.length; i++) {
    var existingMenu = existingMenus[i];
    var existingMenuHTML = [];
    var targetChildren = existingMenu.parentElement.nextElementSibling.children;
    console.log(targetChildren)
    // Here I'm adding +1 to the ID as it appears starting at zero with a styled checkbox does not work correctly
    for (var x = 0; x < targetChildren.length; x++) {
        if (targetChildren[x].selected) {
            existingMenuHTML += '<li><input class="dropdown-input" type="checkbox" id="' + (x + 1) + '" data-label="' + targetChildren[x].textContent + '" checked="true"/><label class="multiLabel" for="' + (x +
                1) + '"><span></span> ' + targetChildren[x].textContent + ' </label></li>';
        } else {
            existingMenuHTML += '<li><input class="dropdown-input" type="checkbox" id="' + (x + 1) + '" data-label="' + targetChildren[x].textContent + '"/><label class="multiLabel" for="' + (x + 1) +
                '"><span></span> ' + targetChildren[x].textContent + ' </label></li>';
        }
    }
    existingMenu.innerHTML += existingMenuHTML;
    console.log(existingMenuHTML)
    var inputs = existingMenu.children;
    console.log(inputs);
    for (var w = 0; w < inputs.length; w++) {
        var input = inputs[w].children[0];
        console.log(input);
        input.addEventListener('click', function() {
            console.log('--------------')
            console.log(event)
            var targetElement = event.target || event.srcElement;
            console.log(targetElement);
            var elementParent = targetElement.parentElement.parentElement.parentElement;
            console.log(elementParent)
            if (!elementParent.classList.contains('open')) {
                elementParent.className += ' open';
            }
            var multiList = elementParent.nextSibling.querySelector('[value="' + targetElement.dataset.label + '"]');
            console.log(multiList)
            // Subtracting one to account for the plus one I added above
            var inputId = targetElement.id - 1;
            if (targetElement.checked == true) {
                multiList.selected = "selcted";
            } else {
                multiList.selected = "";
            }
            console.log('--------------')
        });
    }
}

var existingMenus=document.getElementsByClassName（'multiSelectMenu'）；
对于（变量i=0；i'；
}否则{
现有MenuHTML+='
'+targetChildren[x].textContent+'
'；
}
}
existingMenu.innerHTML+=existingMenuHTML；
console.log（existingMenuHTML）
变量输入=existingMenu.children；
控制台日志（输入）；
对于（var w=0；w

该代码在multiPick的第一个实例上正常工作，但页面上的所有其他实例都会触发第一个multiSelectMenu项，即使我在第页上单击了第三个multiSelectMenu

这是控制台的屏幕截图，

---

这是一支代码笔，当你点击“标签”而不是复选框时，它与我看到的问题相同

我能够重新编写代码并将EventListener添加到标签而不是复选框。

我能够重新编写代码并将EventListener添加到标签而不是复选框。

在小提琴中获得不同的事件。目标的原因是html中的以下代码片段

 <input class="dropdown-input" type="checkbox" id="1" data-label="English only">
 <label class="multiLabel" for="1"><span></span> English only </label>

只有英语

可以看到，在label元素中，有for属性，该属性包含输入元素的id。for属性的功能是，该属性的值标识标签绑定到哪个表单元素。单击标签时，它将模拟有界元素的单击事件。这就是为什么单击标签时，脚本中的事件。target是标签绑定的输入

---

有关属性的更多信息，请参见此处

在fiddle中获取不同的事件.target的原因在于html中的以下代码片段

 <input class="dropdown-input" type="checkbox" id="1" data-label="English only">
 <label class="multiLabel" for="1"><span></span> English only </label>

只有英语

可以看到，在label元素中，有for属性，该属性包含输入元素的id。for属性的功能是，该属性的值标识标签绑定到哪个表单元素。单击标签时，它将模拟有界元素的单击事件。这就是为什么单击标签时，脚本中的事件。target是标签绑定的输入

---

有关属性的更多信息，请参见此处

事件侦听器函数缺少

event

参数。并非所有浏览器都允许您将其作为全局变量进行访问。您可以生成可执行文件吗？我已经添加了事件参数，但遗憾的是，它仍然存在相同的问题。我可以尝试创建代码笔，但我使用的是一种称为VisualForce的语言，它只呈现HTML，因此转换编译后的标记并不容易。代码笔添加，谢谢！事件侦听器函数缺少

event

参数。并非所有浏览器都允许您将其作为全局变量进行访问。您可以生成可执行文件吗？我已经添加了事件参数，但遗憾的是，它仍然存在相同的问题。我可以尝试创建代码笔，但我使用的是一种称为VisualForce的语言，它只呈现HTML，因此转换编译后的标记并不容易。代码笔添加，谢谢！另见