jQueryスクロールトップ、入力ラベルの使用中のスクロールは2倍です

Question

私は奇妙な問題を見ます スクロールプラグイン 予想される距離の2倍をスクロールしますが、ラジオボタンまたはチェックボックスラベルをクリックした場合のみです。

プラグインを削除して、これに置き換えました...

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

しかし、問題は残っていました。それで、私は運がなくてアニメーションストップを追加しようとしました...

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

それから私はこの問題の非常に基本的なjsfiddleを作成しましたが、これがjqueryコアバグであると確信しています。 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>

ここでの問題は、そのjQueryです scrollTop() 計算された位置を2倍にしますが それだけ をクリックすると <label> ラジオボタンまたはチェックボックスを選択します。ラジオボタンまたはチェックボックス自体を含む他のものをクリックすると、適切な距離をスクロールします。

http://jsfiddle.net/sparky672/szakj/

ご覧のとおり、入力要素にリンクされたラベルをクリックすると、ダブルスクロールが発生します。

他のいくつかの観察結果：

私のページでは、スクロールが起動して2回停止するかのように見えました。だから私は追加しました .stop(true, true) 私のアニメーションに。ただし、この問題を止めることには影響しません。

これに依存する別の機能があるため、ラベルを使用して入力要素を選択することは避けられません。 （例： http://jsfiddle.net/sparky672/cgmx8/)

を探しています...

1）これの説明。そうでない場合、おそらくそれは単なる（新しい？）jQueryコアバグです。 Googleを検索した後、この癖について他に言及することはできませんでした。 jQueryバグトラッカーにも何もありません.

2）これの回避策を講じて、入力ラベルをクリックして、スクロールが2倍になっていないことがあります。ラジオボタンとラベルを含むコンテナ内の何かがクリックされたら、スクロール効果を実現したいと思います。セレクターを洗練できるので、ラベルがクリックされたときにスクロールを半分に切断できるが、他のものがクリックされたときは正常に機能すると考えています。 （アニメーションが2回起動されているかのように見えるので、それはあまりうまくいかないかもしれません。）

Answer 1

1）これの説明。そうでない場合、おそらくそれは単なる（新しい？）jQueryコアバグです。 Googleを検索した後、この癖について他に言及することはできませんでした。 jQueryバグトラッカーにも何もありません。

これは問題ではありません scrollTop またはアニメーション。それはに関係しています click イベントが2回処理されます #wrapper いつ label クリックされます。

いつ label クリックされます、a click イベントは泡立ちます #wrapper. 。ただし、クリックします label また、トリガーa click のイベント input それは縛られています、それはまた泡立ちます #wrapper.

これの証明については、チェックしてください この例: http://jsfiddle.net/g9gat/. 。たびに click イベントが処理され、ターゲット要素のタグ名を追加しています。クリックすると label それは付録です label に続く input.

2）これの回避策を講じて、入力ラベルをクリックして、スクロールが2倍になっていないことがあります。

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

更新例： http://jsfiddle.net/r3fx4/