0

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

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

$("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用作 中的for属性<label>，则单击<label>将选择其相应的单选按钮或复选框。（这应该像那样工作。）

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

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

http://jsfiddle.net/sparky672/sZAkJ/

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

其他一些观察：

在我的页面中，滚动似乎开始和停止了两次。这就是为什么我添加.stop(true, true)到我的动画。然而，这对阻止这个问题没有任何影响。

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

我在找...

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

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

4

1 回答 1

2

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

这不是scrollTop动画或动画的问题。它与单击时click被处理两次的事件有关。#wrapperlabel

单击时label，click事件会冒泡到#wrapper。但是，单击label也会触发它所关联的click事件，该事件input也会冒泡到#wrapper.

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

2）一个解决方法，这样我就可以点击输入标签，而不是让滚动加倍。

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

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

于 2011-10-19T16:50:32.247 回答