jQuery事件冒泡时如何获取绑定点击事件的元素

先纠正你代码里的两个基础认知和写法问题，再给出规范实现：

• HTML的class属性不需要加选择器前缀.，你写的class=".clickable"是错误的，会导致jQuery选择器无法匹配到元素，正确写法是class="clickable"
• 你混淆了jQuery事件回调里两个核心对象的指向：
  • this：永远指向你调用.click()绑定事件时选中的元素，也就是类为clickable的div，不管你点击的是div内部的图片、文本还是其他子元素，这个指向都不会变
  • e.target：才是实际触发点击事件的最底层DOM元素，比如你点击img的时候它就是img元素

最简实现方案 #

你完全不需要写分支判断手动查找父元素，直接用this拿到绑定事件的目标div加类即可，这也是jQuery事件绑定最标准的写法：

<div class="clickable">
    <img src="my-big-button.png">
    Some text maybe
</div>

$(".clickable").click(function() {
    // this固定指向绑定了当前点击事件的.clickable元素，和点击的内部子元素无关
    $(this).addClass("selected");
});

通用适配方案 #

如果你后续用到事件委托、或者需要兼容DOM结构可能调整的场景，不要手动判断标签名查找父级，用jQuery提供的closest()方法即可：该方法会从当前元素开始沿DOM树向上匹配，返回第一个符合传入选择器的元素（包含元素自身），鲁棒性远高于手写的标签判断逻辑：

// 示例：从实际触发元素开始查找目标元素，适合事件委托等复杂场景
$(".clickable").click(function(e) {
    const $clickableEl = $(e.target).closest('.clickable');
    $clickableEl.addClass("selected");
});

补充说明：你原来写的判断逻辑本身是无效的——你给el赋值的是$(this)，那el的标签名永远是DIV，永远进不到判断IMG的分支里，你之前的逻辑本意其实是判断e.target的标签名。

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