この問題は、高速クリッカーでない限り発生しないため、一般の人には当てはまらない可能性があることに注意してください。(150-200ms/クリック)この問題を投稿する理由は、アプリケーションに 20 個以上のチェックボックスが隣り合ったフォームがあり、広範な調査の結果、この問題に関する関連する質問が見つからなかったためです。
以下は単純化されたシナリオです。チェックボックス ID ごとに 1 つずつ、4 つのチェックボックスと 4 つのラベルがあります。
[CB1] Label 1
[CB2] Label 2
[CB3] Label 3
[CB4] Label 4
いずれの場合も、すべての CB がチェックされていないと仮定します。
予想される行動:
- 4 つの CB を立て続けにクリックすると、すべてチェックされます。(真実)
- 4 つのラベルを立て続けにクリックすると、対応する CB がチェックされます。(Chrome にのみ当てはまりますが、それでも最適ではありません)
Win 7 でのケース 2 の実際の動作(ご存知のように、ラベルは大きくてスタイル設定可能で、チェックボックスは小さくて OS に依存するため、ラベルをクリックします):
- (Firefox 19 では) CB2 と CB4 はチェックされていないままで、リストを下に移動すると、ダブルクリックしたかのように、ラベル 2 とラベル 4 の「ラベル」という単語が強調表示されます。
- (Chrome 26 では) すべての CB が正しくチェックされますが、リストを下に移動すると、ラベル 2 とラベル 4 の「ラベル」という単語が強調表示され、ダブルクリックしたかのようになります。
- (IE 10 では) CB2 と CB4 はチェックされていませんが、誤った強調表示はありません。
クリックが同じ要素上にある場合、誤った動作が正当化される可能性があります。私たちの場合、それらは異なる ID と名前を持つ明らかに一意のチェックボックスです。したがって、結果は非常に予想外です。
だから私の質問は:
さまざまなチェックボックスをすばやくクリックしたときにダブルクリックイベントの発生を無効にする方法はありますか?
最も近いのは次のスクリプトで、興味深いことに Firefox を Chrome のように動作させ、Chrome を Firefox のように動作させました。
jQuery(document).on('dblclick', 'input:checkbox+label', function(event){
console.log('ugly hack fired');
$(this).click();
event.preventDefault();
})