如何防止嵌套在另一个也使用 onclick 的元素上的链接上的单击事件？

Question

我有这个简单的代码

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

我希望点击类“do it”触发一个函数，所以我尝试了这个

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

在控制台中我读到：[object HTMLSpanElement

我必须找到一种方法，它适用于 html-tags 的所有排序或嵌套方式。

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

我看到警报“hello world”，但在那之后，链接仍然会打开

Answer 1

只是测试

但是我不建议你给这两个元素赋予相同的类

这里可以点击链接和span的onclick触发，但不能点击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>