title: How I can prevent the click event on a link which is nested on another element which also use onclick?
body: <p>I have this simple code</p>
  
  <pre><code>&lt;span class="doit"&gt;&lt;a class="doit"href="ww.domain.com"&gt;text&lt;/a&gt;&lt;/span&gt;
  </code></pre>
  
  <p>I want the click on the class "do it" fired a function, so I tried this</p>
  
  <pre><code>$(document).on('click', '.doit', function(e) {
  
      // prevents to handle the click for nested objects again
      e.stopPropagation();
  
      alert("hello world"); 
  });
  </code></pre>
  
  <p>Now I have the problem, that if I click on the <code>&lt;a href</code> the link from href will open and not the on.click function will be fired.</p>
  
  <p>How I can prevent, that the link will be fired instead of the on.click event?</p>
  
  <p><strong>UPDATE 1</strong></p>
  
  <p>I tried a suggested answer with this, failed because the href link is already opened. I must prepare to open the link, only the on.click event should work.</p>
  
  <pre><code>&lt;span class="doit"&gt;
   &lt;a class="doit" href="http://www.example.com" target="_blank"&gt;webcms von 
    &lt;span class="doit"&gt;ABC&lt;/span&gt;
    &lt;span class="doit"&gt;123&lt;/span&gt;
   &lt;/a&gt;
  &lt;/span&gt;
  </code></pre>
  
  <pre><code>if ($(e.target).is("a")) {     
      e.preventDefault(); // stop the href 
      alert("I WILLL not go to " + e.target.href);
      e.cancelBubble = true; // do not click through
      e.stopPropagation(); // just stop the event or it will trigger again on the span
      return false; 
  }
  
  console.log('target:'+e.target);
  </code></pre>
  
  <p>In the console I read: [object HTMLSpanElement</p>
  
  <p>I must find a way, which works in every way the html-tags are ordered or nested.</p>
  
  <p><strong>Update 2</strong></p>
  
  <pre><code>if ($(e.target).is("a")) 
  {     
        e.preventDefault(); // stop the href  
  }
  e.cancelBubble=true; // do not click through
  e.stopPropagation(); // just stop the event or it will trigger again on the span
  alert("hello world");
  </code></pre>
  
  <p>I see the alert 'hello world' but after that, the link will still be opened</p>