2

这是一个看似棘手的 HTML/JS 小点,它让我或 jQuery 被抛出一个循环(我的钱在我身上)。

它在这个 fiddle中进行了演示。


...但这是场景。一个锚被一个跨度包裹:

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

跨度有一个单击处理程序来单击锚点。这需要.one()避免由于事件冒泡而永远循环(我也尝试过.on().off()相同的结果短路循环 - 参见小提琴)。

$('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. ... {蟋蟀!?!} ....

即使锚点的 JSclick事件已经触发,href 也不会被跟随


我猜这直到第二次从 冒泡之后才.one()解除点击事件的绑定,并且在那一点上,事件传播完全消失了。由于在所有点击事件完成之前不会遵循 href,因此当信号在不知道触发 go-to-href 事件时死亡。span anchorspananchor

......但这真的会发生吗?是什么赋予了?

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

4

1 回答 1

4

在第一个实例中(当您直接单击它时)会遵循该链接,因为这是<a>标签的工作方式,并且您的任何处理程序都不会要求取消默认行为。

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

于 2012-04-05T15:25:10.880 回答