获取带有图片的链接的href属性

Question

使用jQuery，我只是想在鼠标单击图像或周围区域时获取的href。 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);
});

但问题是，每当我点击标签内的图片时，我无法获取标签的href属性值，因为它试图从我所点击的图片中获取href属性值而不是标签。但是，如果我点击图片周围的区域，我会得到所需的href属性值。

尝试：

我进行了更改：

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

致：

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

但是当点击图像或周围区域时，什么都没有发生！

我做错了什么？ 我不敢相信自己会问这样简单的问题，但我刚刚停止编码一年，显然错过了一些重要的东西，并且令我困惑。

我希望能够点击 a 内的 everything 并获取a的 href 。

- Martin James

---

也许只需编写代码，以便如果检测到点击的项目是<img>而不是<a>，则遍历到其父级，然后获取href？ - Alexander Nied

不好意思，请问锚点声明中的"data-path"是什么？ - Richard

@Richard；data-path是一种自定义数据属性（http://html5doctor.com/html5-custom-data-attributes/）。 - Martin James

Answer 1

你可以尝试使用 e.currentTarget，它可以获取绑定事件的元素，而 e.target 则可以获取实际被点击的元素。相关链接请点此：e.currentTarget。

- digital-pollution

---

我将我的选定答案更改为这个，因为它涉及实际问题。如果不使用this，使用箭头函数是完全可以的，但只需要使用e.currentTarget就可以使其正常工作。谢谢！ - Martin James

是的，抱歉我应该给出一个解释。使用es6箭头函数，“this”关键字的上下文仍然保留在外部范围，因此最好引用事件对象。currentTarget更好用，因为它返回绑定事件的元素对象，而target将返回实际单击的内部元素。 - digital-pollution

Answer 2

尝试一下：var href = event.toElement.parentElement.href;

- Vivek Prasad

Answer 3

这可能会帮助你入门：

$(document).on('click', '#main_nav a', function(e) {
   e.preventDefault();
   let target = $(this).attr('href'); 
   alert(target)
});

请参阅jsFiddle演示

- cssyphus

Answer 4

使用jQuery应该是：

$(this).parent().attr('href');

不使用jQuery，这将是：

this.parentNode.getAttribute("href")

完整的代码如下：

$(document).on('click', 'image-class/id', (e) => {
  e.preventDefault();
 let target = $(this).parent().attr('href');
  router.navigate(target);
});

图片是锚点的子元素，当你点击图片时，你需要获取它的父元素，可以通过以下方式实现。

演示：https://jsfiddle.net/ask3a4gf/

- Salman Ahmed

Answer 5

你的问题来自于使用箭头函数而不是function(e)

将(e) => {改为function(e) {并使用$(this).attr('href')

引用自Mozilla -

箭头函数表达式具有比函数表达式更短的语法，并且没有自己的this

- Adjit

---

非常感谢！这背后的原因是什么？我正在尝试使用ES6标准编写Javascript，并使用Babel进行转译，因此我的脚本中有许多箭头函数。 - Martin James

不要混淆“想使用ES6”和“必须使用箭头函数”。箭头函数用于在需要保留this上下文到声明上下文时，它们并不完全替代function() {}符号。当使用function()语法时，jQuery会执行一些魔法，以便$(this)可以“做正确的事情”，但是对于箭头函数，它无法执行该操作。也就是说，依赖这种魔法已经成为一个越来越糟糕的想法，因为它颠覆了您根据规范期望JS工作的方式。另一个选项是首先找到您的<a>，然后明确绑定每个点击。 - Mike 'Pomax' Kamermans

@MartinJames 我不熟悉Babel，但我知道箭头函数没有this关键字。所以现在当你调用e.target时，你会得到你点击事件的实际低级目标。this关键字指的是当前函数正在处理的元素，而在你的情况下是[data-path]。 - Adjit

箭头函数绝对拥有 this：与普通函数不同，普通函数中的 this 是隐式的，而在箭头函数中，this 明确地绑定到声明上下文，无论何时何地调用该箭头函数。如果问题出在 e.target 上，那么最简单的解决方案是使用 e.currentTarget，如 digital-pollution 的回答所示。 - Mike 'Pomax' Kamermans