获取点击链接的href与里面的图像

Using jQuery, I'm simply trying to get the href of the a when the mouse clicks the image or the surrounding area.

使用jQuery,我只是想在鼠标点击图像或周围区域时获取a的href。

HTML template:

<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>

Styles:

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);
});

But the problem is, whenever I click on the image inside the a, I don't get the href, as it tries to get the href value from the image that I clicked on and not the a. However, if I click on the area surrounding the image, I get the href as desired.

但问题是,每当我点击a中的图像时,我都没有得到href,因为它试图从我点击的图像中获取href值,而不是a。但是,如果我点击图像周围的区域,我会根据需要获得href。

Attempts:

I changed:

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

To:

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

But get absolutely nothing when clicking the image or the surrounding area!

但是点击图片或周边区域时绝对没有任何意义!

What am I doing wrong? I can't believe I'm asking questions about simple things like this but I've just taken a year off coding and I'm obviously missing something important, and it's baffling me.

我究竟做错了什么?我不敢相信我会问这样简单的事情,但是我只花了一年时间编码而且我显然错过了一些重要的东西,而且令我感到困惑。

I want to be able to click everything inside the a and get the href of the a.

我希望能够点击a中的所有内容并获取a的href。

5 个解决方案

#1

You can try e.currentTarget, this will get the element that the event was bound to, e.target will get the element that was actually clicked.

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

#2

This might get you started:

这可能会让你开始:

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

See jsFiddle Demo

请参阅jsFiddle演示

#3

Using jquery it should be:

使用jquery应该是:

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

Without using jquery this would be:

不使用jquery,这将是:

this.parentNode.getAttribute("href")

Complete code is:

完整的代码是:

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

Image is child of anchor tag, you need to get his parent when you click on image so this done by this way.

图像是锚标记的子项,当您单击图像时需要获取其父项,这样就可以通过这种方式完成。

Demo: https://jsfiddle.net/ask3a4gf/

#4

$("a").click(function(event) {
         var href = $('a').attr('href');
         alert(href);
event.preventDefault();
 });

$(this) or $(e.target) in your code refers to the image not to the "a" element.

代码中的$(this)或$(e.target)是指图像不是“a”元素。

#5

-2

Your issue is coming from the use of an arrow function instead of function(e)

您的问题来自使用箭头功能而不是功能(e)

Change (e) => { to function(e) { and use $(this).attr('href')

改变(e)=> {到函数(e){并使用$(this).attr('href')

Quoting from mozilla -

引自mozilla -

An arrow function expression has a shorter syntax than a function expression and does not have its own this

箭头函数表达式的语法比函数表达式短,并且没有自己的语法

#1