javascript - 如何防止对未链接的标签内指定元素的点击？

Question

我有一段 HTML，例如：

<a href="http://site.com">
  <span id="a">Click here to link to site.com</span>
  <span id="b">Click here not to link to site.com</span>
</a>

在不更改 DOM 结构的情况下，仅通过 JavaScript，如何防止span#b在单击 site.com 时链接到它？

我在这个项目中使用了 jQuery，所以最好用 jQuery 来实现。

谢谢，

更新：

抱歉，我找到了在特定情况下return false或.stopPropagation()不起作用的答案。所以我上传了更多细节：

这是 DOM 树，抱歉我要隐藏一些个人信息：

以下是相关代码：

$('.span_wrapper').click(function(e){
  e.stopPropagation();
  alert('clicked');
  return false;
});

它仍然链接到页面到外部<a>标签的 href 值。

更新：这是一个解释我正在尝试的视频：

https://www.facebook.com/photo.php?v=10201864154343615

Answer 1

只是防止事件从#b元素传播/冒泡到<a>元素：

$('#b').on('click', function(e) {
    e.preventDefault();
    // any other code to react to this click here
});

还有一个速记版本来实现同样的事情（如果你没有任何其他逻辑）：

$('#b').on('click', false);

从文档：

该值false也可以作为一个简单的函数的简写return false。

从 jQuery 事件处理程序调用return false相当于调用event.stopPropagation()和event.preventDefault()。在函数开头调用的好处e.preventDefault()是，即使在执行处理函数的其余部分时抛出错误，它仍然会阻止链接被跟踪。

注意：在使用元素时，您需要确保它们确实存在，然后再尝试这样做。这要么意味着 DOM 就绪处理程序，要么将脚本移动到 HTML 文档的末尾，就在</body>标记之前。

Answer 2

我认为这样的事情会起作用

$("a #b").click(function(){return false});

Answer 3

停止传播将click事件绑定到span#b

$('#b').click(function(e) {
   e.stopPropagation();
   return false;
});