Как я могу предотвратить событие click для ссылки, которая вложена в другой элемент, который также использует onclick?

Question

У меня есть этот простой код

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

Я хочу, чтобы щелчок по классу "сделать это" вызвал функцию, поэтому я попробовал это

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

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

    alert("hello world"); 
});

Теперь у меня проблема, что если я нажму на <a href, откроется ссылка из href, и не будет запущена функция on.click.

Как я могу предотвратить, что ссылка будет запущена вместо on.clickсобытие?

ОБНОВЛЕНИЕ 1

Я попытался предложить ответ с этим, не удалось, потому что ссылка href уже открыта.Я должен подготовиться к открытию ссылки, должно работать только событие on.click.

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

В консоли я прочитал: [объект HTMLSpanElement

Я должен найти способ,который работает во всех отношениях, html-теги упорядочены или вложены.

Обновление 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");

Я вижу предупреждение "Привет мир", но после этого,ссылка все равно будет открыта

Answer 1

Просто протестируйте

Однако я не рекомендую указывать один и тот же класс для двух элементов

Здесь вы можете щелкнуть ссылку и щелчок триггеров диапазона, но не href

Кстати, вложенные пролеты - это не правильный HTML

$(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>

Альтернатива

$(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>