通过javascript拦截链接点击仅在某些情况下有效；为什么？

Question

我遇到一种情况，我想拦截具有最有效href属性的链接的点击，并可能在初始页面加载后动态添加链接，并阻止他们跟踪链接。我在SO上尝试了与此答案非常相似的内容：

https://stackoverflow.com/a/33616981/6294605

我的拦截功能看起来略有不同：

function interceptClickEvent(event) {
    let target = event.target || event.srcElement;
    let $target = $(target);

    console.log(`intercept click event called with closest a: `);
    console.log($target.closest(`a`));

    if ($target.closest(`a`).length > 0) {
        event.preventDefault();
        event.stopPropagation();
        console.log(`there's a link`);
    }
}

但是发生的是，这仅适用于具有以下结构的一个链接：

[...]
<a href=...>
    <div>(Site-Logo)</div>
</a>
[...]

但是在具有以下结构的链接上失败：

[...]
<a href=...>
    <span>Info</span>
    <span>More Info</span>
</a>
[...]

在第二种情况下，它甚至无法达到：

console.log(`intercept click event called with closest a: `);

，而是立即触发跟踪链接。

为什么会这样？

编辑：我认为这是由于另一个事件处理程序已附加到锚元素。请参见以下小提琴：

http://jsfiddle.net/vkoj74da/8/