jQuery ScrollTop，使用输入标签时滚动是双倍的答案

【问题标题】：jQuery ScrollTop, scroll is double while using input labelsjQuery ScrollTop，使用输入标签时滚动是双倍的
【发布时间】：2011-12-11 02:33:31
【问题描述】：

我看到一个奇怪的问题，ScrollTo plugin 滚动两倍于预期的距离，但仅当您单击单选按钮或复选框标签时。

我删除了插件并用这个替换它......

$("html, body").animate({ scrollTop: '+=50' }, 650);

但问题仍然存在。所以然后我尝试添加一个动画停止但没有运气......

$("html, body").stop(true, true).animate({ scrollTop: '+=50' }, 650);

然后我为这个问题创建了一个非常基本的 jsFiddle，现在我确信这是一个 jQuery Core 错误。在 jsFiddle 允许的情况下，在所有 jQuery 版本中进行了测试。到目前为止，在 Safari、Firefox 和 IE8 中都是一样的。

如果单选按钮或复选框旁边有一个<label> 元素，并且其id 用作<label> 中的for 属性，则单击<label> 将选中其对应的单选按钮或复选框。（这应该是这样工作的。）

<input id="type-0" type="radio" name="name" value="" />
<label for="type-0" title="">Click this Label and Radio is selected.</label>

这里的问题是 jQuery scrollTop() 将计算的位置加倍，但仅当您单击选择单选按钮或复选框的 <label> 时。当您单击其他任何内容（包括单选按钮或复选框本身）时，它会滚动适当的距离。

如您所见，单击链接到其输入元素的标签会导致双滚动。

其他一些观察：

在我的页面中，滚动似乎开始和停止两次。这就是我在动画中添加.stop(true, true) 的原因。但是，这对阻止此问题没有任何作用。

我无法避免使用标签来选择我的输入元素，因为我有另一个依赖于此的功能。（例如：http://jsfiddle.net/sparky672/CgMX8/）

我正在寻找...

1) 对此的解释。如果没有，也许它只是一个（新的？）jQuery Core 错误。搜索 Google 后，我找不到任何其他提及此怪癖的内容。 Nothing in the jQuery bug tracker either.

2) 一种解决方法，这样我就可以单击输入标签而不会使滚动加倍。当单击容器内的任何内容（包括单选按钮和标签）时，我想实现滚动效果。我认为可以改进选择器，以便在单击标签时可以将滚动切成两半，但在单击其他任何内容时仍然可以正常工作。（这也可能效果不佳，因为它仍然看起来好像动画被触发了两次。）

【问题讨论】：

【解决方案1】：

1) 对此的解释。如果没有，也许它只是一个（新的？）jQuery Core 错误。搜索 Google 后，我找不到任何其他提及此怪癖的内容。 jQuery 错误跟踪器中也没有任何内容。

这不是scrollTop 或动画的问题。这与单击label 时在#wrapper 上处理两次click 事件有关。

单击label 时，click 事件会冒泡到#wrapper。但是，单击label 也会在与之关联的input 上触发click 事件，该事件也会冒泡到#wrapper。

为了证明这一点，请查看此示例：http://jsfiddle.net/g9gAT/。每次处理click 事件时，我都会附加目标元素的标记名称。当您单击label 时，它会附加label，后跟input。

2) 一种解决方法，这样我就可以单击输入标签而不会使滚动加倍。

$("#wrapper label").click(function (e) {
    e.stopPropagation();
});

更新示例： http://jsfiddle.net/r3fX4/

【讨论】：