jQuery ScrollTop，使用输入标签时滚动是双重的
我看到一个奇怪的问题，其中 ScrollTo 插件 滚动两倍于预期距离，但仅当您单击单选按钮或复选框标签时。
我删除了该插件并将其替换为这个......
$("html, body").animate({ scrollTop: '+=50' }, 650);
但问题仍然存在。所以然后我尝试添加一个动画停止但没有运气...
$("html, body").stop(true, true).animate({ scrollTop: '+=50' }, 650);
然后我创建了一个非常基本的 jsFiddle 问题，我现在确信这是一个 jQuery Core bug。在 jsFiddle 允许的范围内，在所有 jQuery 版本中进行了测试。到目前为止，在 Safari、Firefox 和 IE8 中都是一样的。
如果单选按钮或复选框旁边有一个 元素，并且其 id 用作 中的 ，单击for 属性将选择其相应的单选按钮或复选框。 （这应该是这样工作的。）
<input id="type-0" type="radio" name="name" value="" />
<label for="type-0" title="">Click this Label and Radio is selected.</label>
这里的问题是 jQuery scrollTop() 将计算的位置加倍，但仅当您单击 选择单选按钮或复选框。当您单击其他任何内容（包括单选按钮或复选框本身）时，它会滚动适当的距离。
http://jsfiddle.net/sparky672/sZAkJ/
如您所见，单击链接到的标签它的输入元素会导致双滚动。
其他一些观察结果：
在我的页面中，滚动似乎开始和停止两次。这就是为什么我将 .stop(true, true) 添加到我的动画中。然而，这对解决这个问题没有任何作用。
我无法避免使用标签来选择我的输入元素，因为我有另一个依赖于此的功能。 （示例：http://jsfiddle.net/sparky672/CgMX8/）
我正在寻找。 ..
1）对此的解释。如果不是，也许这只是一个（新的？）jQuery Core 错误。在谷歌搜索后，我找不到任何其他提到这个怪癖的地方。 什么也没有在 jQuery bug 跟踪器中。
2）解决此问题的方法是，我可以单击输入标签而不会使滚动加倍。我想在单击容器内的任何内容（包括单选按钮和单选按钮）时实现滚动效果。标签。我认为可以改进选择器，以便在单击标签时滚动可以切成两半，但在单击其他任何内容时仍然可以正常工作。 （这可能也不太有效，因为它仍然看起来好像动画被触发了两次。）
I see a strange issue where the ScrollTo plugin scrolls twice the expected distance, but only when you click on a radio button or checkbox label.
I removed the plugin and replaced it with this...
$("html, body").animate({ scrollTop: '+=50' }, 650);
Yet the issue remained. So then I tried adding an animation stop with no luck...
$("html, body").stop(true, true).animate({ scrollTop: '+=50' }, 650);
Then I created a very basic jsFiddle of the issue and I'm now convinced this is a jQuery Core bug. Tested in all jQuery versions back as far as jsFiddle allows. So far, it's the same in Safari, Firefox and IE8.
If there's a <label> element next to a radio button or checkbox and its id is used as the for attribute within the <label>, clicking the <label> will select its corresponding radio button or checkbox. (This is supposed to work like that.)
<input id="type-0" type="radio" name="name" value="" />
<label for="type-0" title="">Click this Label and Radio is selected.</label>
The issue here is that jQuery scrollTop() doubles the calculated position but only when you click on a <label> which selects a radio button or checkbox. It scrolls the proper distance when you click anything else including the radio button or checkbox itself.
http://jsfiddle.net/sparky672/sZAkJ/
As you can see, clicking the label linked to its input element causes a double scroll.
Some other observations:
In my page, it appeared as if the scroll starts and stops twice. That's why I added the .stop(true, true) to my animation. However that has no effect towards stopping this problem.
I cannot avoid using the labels to select my input elements since I have another feature that depends upon this. (Example: http://jsfiddle.net/sparky672/CgMX8/)
I'm looking for...
1) An explanation for this. If not, perhaps it's just a (new?) jQuery Core bug. I was unable to find any other mention of this quirk after searching Google. Nothing in the jQuery bug tracker either.
2) A workaround for this so I can click on input labels and not have the scroll doubled. I'd like to achieve the scroll effect when anything within the container is clicked including the radio buttons & labels. I'm thinking that the selectors can be refined so the scroll can be cut in half when a label is clicked but still work normally when anything else is clicked. (That may not work very well either since it still appears as if the animation is fired twice.)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
这不是
scrollTop或动画的问题。这与单击label时在#wrapper上处理两次click事件有关。单击
label时，click事件将冒泡至#wrapper。但是，单击label也会触发其所绑定的input上的click事件，该事件也会冒泡到#wrapper.要证明这一点，请查看此示例：http://jsfiddle.net/g9gAT/< /a>.每次处理
click事件时，我都会附加目标元素的标签名称。当您单击标签时，它会附加标签，后跟输入。更新示例： http://jsfiddle.net/r3fX4/
This isn't an issue with
scrollTopor animation. It has to do with theclickevent being handled twice on#wrapperwhen thelabelis clicked.When the
labelis clicked, aclickevent bubbles up to#wrapper. However, clicking thelabelalso triggers aclickevent on theinputit's tied to, which also bubbles up to#wrapper.For proof of this, check out this example: http://jsfiddle.net/g9gAT/. Each time the
clickevent is handled, I'm appending the tag name of the target element. When you click alabelit's appendslabelfollowed byinput.Update Example: http://jsfiddle.net/r3fX4/