如何使用jQuery单独获取被点击子div的ID？

这个问题的核心是事件冒泡——当你点击divFour时，点击事件会从这个子元素向上传递到它的所有父元素（divThree、divTwo、divOne）。如果这些父元素也绑定了点击事件，就会导致你误以为$(this).attr('id')返回了父元素的ID，其实是多个事件被依次触发了。

下面给你两种针对性的解决方案：

方案一：直接给目标元素绑定事件 #

如果只有divFour需要响应点击事件，那直接给它单独绑定点击事件就好，这样$(this)就只会指向divFour，自然能拿到它的独立ID：

$('#divFour').click(function() {
    const targetId = $(this).attr('id');
    console.log(targetId); // 输出：divFour
});

方案二：处理事件冒泡（多元素绑定场景） #

如果你的所有div都绑定了点击事件，但只想获取实际被点击的那个元素的ID，可以用以下两种方式：

方式1：阻止事件冒泡 #

通过event.stopPropagation()阻止事件向上传递，这样点击子元素时，父元素的点击事件不会被触发：

$('div').click(function(event) {
    event.stopPropagation(); // 阻止事件冒泡到父元素
    const targetId = $(this).attr('id');
    console.log(targetId); // 点击哪个div就输出对应的ID
});

方式2：使用event.target获取原始触发元素 #

event.target会返回实际被点击的那个元素，和绑定事件的元素无关，不管冒泡与否都能拿到正确的目标ID：

$('div').click(function(event) {
    const targetId = $(event.target).attr('id');
    console.log(targetId); // 输出实际点击的元素ID
});

内容的提问来源于stack exchange，提问作者Kesav Sundar M