How I can prevent the click event on a link which is nested on another element which also use onclick?

Question

I have this simple code

<span class="doit"><a class="doit"href="ww.domain.com">text</a></span>

I want the click on the class "do it" fired a function, so I tried this

$(document).on('click', '.doit', function(e) {

    // prevents to handle the click for nested objects again
    e.stopPropagation();

    alert("hello world"); 
});

Now I have the problem, that if I click on the <a href the link from href will open and not the on.click function will be fired.

How I can prevent, that the link will be fired instead of the on.click event?

UPDATE 1

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.

<span class="doit">
 <a class="doit" href="http://www.example.com" target="_blank">webcms von 
  <span class="doit">ABC</span>
  <span class="doit">123</span>
 </a>
</span>

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

In the console I read: [object HTMLSpanElement

I must find a way, which works in every way the html-tags are ordered or nested.

Update 2

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

I see the alert 'hello world' but after that, the link will still be opened

Answer 1

Just test

However I do not recommend you give the same class to the two elements

Here you can click the link and the onclick of the span triggers but not the href

Nested spans are not correct HTML by the way

 $(document).on('click', '.doit', function(e) { 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 alert("hello world"); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span class="doit"> <a class="doit" href="http://www.example.com" target="_blank">webcms von <span class="doit">4U</span> <span class="doit">.tools</span> </a> </span> 

Alternative

 $(document) .on('click', 'a.doit', function(e) { e.preventDefault(); alert("I WILLL not go to " + e.target.href); }) .on('click', 'span.doit', function(e) { alert("hello world"); e.cancelBubble=true; e.stopPropagation() }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span class="doit"> <a class="doit" href="http://www.example.com" target="_blank">webcms von <span class="doit">4U</span> <span class="doit">.tools</span> </a> </span>