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

Question

我有这个简单的代码

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

我想要点击 class "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 中的 link 将打开，而不是 on.click 函数将被触发。

我如何防止触发 link 而不是 on.click 事件？

更新 1

我尝试了一个建议的答案，但失败了，因为 href link 已经打开了。我必须准备打开 link，只有 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 标签有序或嵌套的所有方面都有效。

更新 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' 但之后 link 仍会打开

Answer 1

刚刚测试

但是我不建议你给两个元素相同的class

这里可以点击link，span的onclick会触发，href不会

嵌套的 span 不正确 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>

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

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

javascript

jquery

event-listener

event-handling

dom-events