title: get href of clicked link with image inside
body: <p>Using jQuery, I'm simply trying to get the <code>href</code> of the <code>a</code> when the mouse clicks the image or the surrounding area.</p>
  
  <p><strong>HTML template:</strong></p>
  
  <pre><code>&lt;nav id="main_nav"&gt;
    &lt;ul&gt;
      &lt;li&gt;
        &lt;a href="/" data-path&gt;
          &lt;img class="dashboard_icon" src="img/icons/nav/dashboard.svg"&gt;
        &lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
    ... more nav options
  &lt;/nav&gt;
  </code></pre>
  
  <p><strong>Styles:</strong></p>
  
  <pre><code>li { list-style: none; display: block; width: 80px; height: 80px; }
  a { display: block; width: 100%; height: 100%; }
  img { width: 30px; height: 30px; margin: 25px; }
  </code></pre>
  
  <p><strong>jQuery:</strong></p>
  
  <pre><code>$(document).on('click', '[data-path]', (e) =&gt; {
    e.preventDefault();
    let target = $(e.target).attr('href');
    router.navigate(target);
  });
  </code></pre>
  
  <p>But the problem is, whenever I click on the image inside the <code>a</code>, I don't get the <code>href</code>, as it tries to get the <code>href</code> value from the image that I clicked on and not the <code>a</code>. However, if I click on the area surrounding the image, I get the <code>href</code> as desired.</p>
  
  <p><strong>Attempts:</strong></p>
  
  <p>I changed:</p>
  
  <pre><code>let target = $(e.target).attr('href');
  </code></pre>
  
  <p>To:</p>
  
  <pre><code>let target = $(this).attr('href');
  </code></pre>
  
  <p>But get absolutely nothing when clicking the image or the surrounding area!</p>
  
  <p>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.</p>
  
  <p>I want to be able to click <em>everything</em> inside the <code>a</code> and get the <code>href</code> of the <code>a</code>.</p>