点击包含HTML的列表项无法获取ID的技术解决方案问询

这里给你两种可行的修改方案：

方案1：直接给

绑定点击事件 #

把事件绑定目标从父级.words改成所有带id的

var wordItems = document.querySelectorAll('.words li[id]');

if (wordItems.length) {
    wordItems.forEach(item => {
        item.addEventListener('click', () => {
            console.log("id: " + item.id);
        });
    });
}

方案2：在父级事件中找到对应的

#

如果需要保留父级.words的事件委托（适合后续动态添加

var words = document.querySelectorAll('.words');

if (words.length) {
    words.forEach(word => {
        word.addEventListener('click', e => {
            // 找到最近的带id的li元素
            const targetLi = e.target.closest('li[id]');
            if (!targetLi) return;
            console.log("id: " + targetLi.id);
        });
    });
}

这两种方法都能解决点击

内容的提问来源于stack exchange，提问作者4532066