jQuery ScrollTop，使用輸入標籤時滾動是雙倍

Question

我看到一個奇怪的問題，其中ScrollTo plugin滾動預期距離的兩倍，但只有當您單擊單選按鈕或複選框標籤時。

我刪除插件，並用此代替它...

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

然而，問題仍然。於是我嘗試添加動畫停止，沒有運氣...

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

然後，我創建了這個問題的一個非常基本的jsfiddle，現在我相信這是一個jQuery核心的bug。只要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>它選擇一個單選按鈕或複選框。當您點擊包括單選按鈕或複選框本身在內的其他任何內容時，它會滾動適當的距離。

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

正如你所看到的，點擊鏈接到其輸入元素的標籤會導致雙滾動。

其他一些意見：

在我的網頁，覺得好像在滾動啓動和停止的兩倍。這就是爲什麼我將.stop(true, true)添加到我的動畫中。但是這對於解決這個問題沒有任何影響。

我不能避免使用標籤來選擇我的輸入元素，因爲我有另一個功能，取決於此。 （例如：http://jsfiddle.net/sparky672/CgMX8/）

我找...

1）對此的解釋。如果沒有，也許這只是一個（新的）jQuery Core bug。搜索Google之後，我無法找到任何其他提及的這個怪癖。 Nothing in the jQuery bug tracker either。

2）解決方法是這樣我可以點擊輸入標籤並且沒有滾動翻倍。當點擊容器中的任何內容（包括單選按鈕&標籤）時，我希望實現滾動效果。我在考慮選擇器可以被改進，所以當點擊標籤時滾動可以被減半，但當點擊其他東西時仍能正常工作。 （這可能不會工作得很好，因爲它仍然看起來好像動畫被激發兩次。）

Answer 1

1）對此的解釋。如果沒有，也許這只是一個（新的）jQuery Core bug。搜索Google之後，我無法找到任何其他提及的這個怪癖。 jQuery bug跟蹤器也沒有。

這不是scrollTop或動畫的問題。當點擊label時，它與click事件在#wrapper上處理兩次有關。

當點擊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/