使用jQuery获取含图片的点击链接href的问题

Hey Martin, let's work through this issue step by step!

问题根源分析 #

你最初遇到的问题是事件源指向错误：当点击图片时，事件触发的是<img>元素，而它本身没有href属性，所以代码拿不到值；点击<a>的周边区域时，事件源是<a>元素，自然能正常获取href。后来修改后完全失效，大概率是破坏了事件绑定的逻辑（比如选择器错误、阻止了事件冒泡或者语法问题）。

两种可行的解决方案 #

方案1：直接绑定事件到<a>标签（推荐）

利用事件冒泡机制，不管点击<a>内部的图片还是空白区域，事件最终都会冒泡到<a>元素上，这样我们直接从<a>拿href就好：

// 给所有包含图片的<a>绑定点击事件
$('a:has(img)').on('click', function(e) {
  e.preventDefault(); // 可选：阻止<a>的默认跳转行为，根据你的需求决定
  const targetHref = $(this).attr('href');
  console.log('获取到的链接：', targetHref);
  // 这里添加你需要的业务逻辑
});

这里的$(this)始终指向触发事件的<a>元素，不管点击的是内部图片还是空白区域，都能正确拿到href。

方案2：用closest()定位父级<a>

如果你的场景需要给<img>也绑定事件（比如有其他交互），可以通过closest()方法从当前点击元素向上查找最近的<a>标签，确保总能拿到正确的href：

// 给<a>和内部的<img>都绑定点击事件
$('a, a img').on('click', function(e) {
  e.preventDefault();
  // 找到当前元素最近的父级<a>
  const targetA = $(this).closest('a');
  const targetHref = targetA.attr('href');
  console.log('获取到的链接：', targetHref);
});

closest('a')会从点击的元素（不管是<img>还是<a>）开始，向上遍历DOM树找到第一个匹配的<a>元素，完美解决事件源不一致的问题。

排查修改后全失效的问题 #

如果修改后完全拿不到值，可以检查这几点：

• 确认jQuery已正确引入，控制台没有$ is not defined的报错；
• 检查选择器是否正确，比如可以用console.log($('a').length)查看匹配的<a>元素数量；
• 有没有误写代码逻辑，比如阻止了事件冒泡却没做后续处理，或者变量名拼写错误。

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