title: How to detect if a specific class link was clicked inside a DIV and override the DIV's click action then?
body: <p>I have several DIV of the following kind on my page:</p>
  
  <pre><code>&lt;div class='entry'&gt;
      This is a statement 
      &lt;a title="Search @travel" class="app-context-link" href=""&gt;@travel&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When a DIV of class .entry is clicked I trigger the following:</p>
  
  <pre><code>$(".entry").on('click', function(e) {
     console.log("DIV Clicked");
  });
  </code></pre>
  
  <p>When a link of the class .app-context-link is clicked I trigger the following:</p>
  
  <pre><code>var context_links = document.getElementsByClassName('app-context-link');
  
  for (var k=0;k&lt;context_links.length;++k) {
      context_links[k].addEventListener('click', function(e) {
          console.log("The context link inside DIV is clicked");
      });
  }
  </code></pre>
  
  <p>The question: </p>
  
  <p>Right now when I click on the app-context-link both actions seem to be triggered: for the DIV (because a .click event is detected) and for the link (because there's an event listener on a link of that class).</p>
  
  <p>How do I make it that if the link is clicked the DIV on click jQuery is not triggered?</p>
  
  <p>I tried several possibilities, nothing worked. Also I would prefer not to reorganize the code too much, but simply add some directive in the on click jQuery part so that it detects if a link was clicked and does not do what it would normally do if the DIV was clicked.</p>
  
  <p>Thank you!</p>