获取带有图片的点击链接的 href

Question

使用jQuery，我只是试图让href的a，当鼠标点击图像或周边地区。

HTML模板：

<nav id="main_nav">
  <ul>
    <li>
      <a href="/" data-path>
        <img class="dashboard_icon" src="img/icons/nav/dashboard.svg">
      </a>
    </li>
  </ul>
  ... more nav options
</nav>

款式：

li { list-style: none; display: block; width: 80px; height: 80px; }
a { display: block; width: 100%; height: 100%; }
img { width: 30px; height: 30px; margin: 25px; }

jQuery：

$(document).on('click', '[data-path]', (e) => {
  e.preventDefault();
  let target = $(e.target).attr('href');
  router.navigate(target);
});

但问题是，每当我点击里面的图片a，我不明白的href，因为它试图获取href从图像值我点击，而不是a。但是，如果我单击图像周围的区域，则会得到href所需的结果。

尝试：

我变了：

let target = $(e.target).attr('href');

到：

let target = $(this).attr('href');

但是单击图像或周围区域时什么也得不到！

我究竟做错了什么？我不敢相信我在问这样简单的问题，但我刚刚从编码中抽出一年，我显然错过了一些重要的东西，这让我感到困惑。

我希望能够点击的一切内部a和得到href的a。

Answer 1

您可以尝试e.currentTarget，这将获取事件绑定到的元素， e.target 将获取实际单击的元素。