title: How to get href of anchor when the event.target is HTMLImageElement?
body: <p>I want to get the href of an anchor element when it is clicked.
  I am using the following javascript code:</p>
  
  <pre><code>document.addEventListener('click', function (event)
  {
      event = event || window.event;
      var el = event.target || event.srcElement;
  
      if (el instanceof HTMLAnchorElement)
      {
          console.log(el.getAttribute('href'));
      }
  }, true);
  </code></pre>
  
  <p>This works perfectly for an embedded anchor such as this:</p>
  
  <pre><code>&lt;div&gt;&lt;p&gt;&lt;a href='link'&gt;&lt;/a&gt;&lt;/p&gt;&lt;div&gt;
  </code></pre>
  
  <p>But it doesn't work when I am working with an anchor and an image:</p>
  
  <pre><code>&lt;div&gt;&lt;a href='link'&gt;&lt;img&gt;&lt;/a&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The <code>event.target</code> is returning the image instead of the anchor.
  The javascript code can be amended with the following <code>if</code> case to get around this:</p>
  
  <pre><code>document.addEventListener('click', function (event)
  {
      event = event || window.event;
      var el = event.target || event.srcElement;
  
      if (el instanceof HTMLImageElement)
      {
          // Using parentNode to get the image element parent - the anchor element.
          console.log(el.parentNode.getAttribute('href'));
      }
      else if (el instanceof HTMLAnchorElement)
      {
          console.log(el.getAttribute('href'));
      }
  }, true);
  </code></pre>
  
  <p>But this doesn't seem very elegant and I'm wondering if there is a better way.</p>
  
  <p><strong>!IMPORTANT!</strong>
  NOTE: Keep in mind, I have no access to an ID or class, or any other traditional identifier for that matter. All I know is that there will be an anchor clicked and I need to get its href. I don't even know where it will be, if it exists or will be created later.</p>
  
  <p>EDIT: Please no jQuery or other javascript libraries.</p>