如何检测父元素及其子元素是否被点击？

你的代码仅在点击<li id="myProjets">元素本身时会触发日志输出，点击它的子元素（img或span）时，event.target指向的是被点击的子元素而非li，导致event.target.matches('#myProjets')条件不成立，代码无法生效。

方案1：用closest()检测祖先元素 #

修改全局点击监听逻辑，通过closest()从点击元素向上查找匹配#myProjets的元素（包含自身）：

window.onclick = function (event) {
    if (event.target.closest('#myProjets')) {
        console.log('element clicked');
    }
}

closest()会返回匹配选择器的最近祖先元素（或元素本身），无论点击li还是它的子元素，都能正确检测到。

方案2：直接给li绑定点击事件 #

利用事件冒泡特性，直接给目标li绑定点击事件，子元素的点击事件会冒泡到父元素触发处理函数：

document.getElementById('myProjets').onclick = function() {
    console.log('element clicked');
}

这种方式更精准，无需在全局window上监听，也能覆盖所有子元素的点击场景。

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