javascript - anchor 包装器上的 jQuery .one ("click") 会导致 href 不被遵循

Question

这是一个看似棘手的 HTML/JS 代码，它让我或 jQuery 陷入了循环(我的钱在我身上)。

已在this fiddle中进行演示.

---

...但这就是场景。 anchor 用跨度包裹:

<span> the span
    <a onclick="alert('onclick HTML attritbute fired!')" href="http://www.href-attribute-    fired.com">the link</a>
    wraps the link
</span>

跨度有一个单击 anchor 的单击处理程序。这需要是 .one() 以避免由于事件冒泡而永远循环(我也尝试过 .on() 和 .off()以相同的结果短路循环 - 请参阅 fiddle )。

$('a').click(function() {
    alert("jQuery click fired!");
});

$('span').one("click", function() {
    alert('(span clicked, let us see what other events fire...)');
    $(this).find('a').click();
});

---

当您点击链接本身时，您会注意到:

1. onclick HTML 属性已触发!
2. jQuery 点击被触发!
3. (单击了跨度，让我们看看会触发哪些其他事件...)
4. onclick HTML 属性已触发!
5. jQuery 点击被触发!
6. 遵循 href

由于事件冒泡到跨度，它会额外循环一次 JS 事件，这有点愚蠢和不优雅，但完全符合预期，对我来说很有意义。这里的关键部分是，在所有 JS 事件完成之后，跟随 href。

当您单击外部范围时，事件的顺序如下:

1. (单击了跨度，让我们看看会触发哪些其他事件...)
2. jQuery 点击被触发!
3. onclick HTML 属性已触发!
4. ... {蟋蟀!？!} ....

即使 anchor 的 JS click 事件已触发，也不会遵循 href。

---

我猜测 .one() 不会解除 span 的点击事件的绑定(bind) 直到从anchor，此时，事件传播完全终止。由于只有在所有点击事件完成后才会跟踪 href，因此当信号在 span 处消失时，anchor 不知道要触发 go-to-href 事件。

...但这真的是发生的事情吗？给出了什么？

有什么更好的方法来解决这个问题(我想避免 JS 出于各种原因取消 href 并手动设置 window.location)？

Answer 1

在第一个实例中(当您直接单击它时)会跟随该链接，因为这就是 <a> 的方式。标签有效，并且您的处理程序都不会要求取消默认行为。

通过 jQuery 在 <a> 上触发“点击”标签明确不跟随链接；这就是 jQuery 的工作原理。