これは Firefox のバグです。バグ 608180を参照してください- チェックボックス ラベルのダブル/クイック クリックが期待どおりに機能しない
IE には、歴史的な理由から (最近のバージョンでは修正されています)、ダブルクリックで2 番目mousedownとイベントをスキップするバグのあるイベント モデルがあります。バグ 263 を参照してください - IE の DoubleClick に注意してください。click
jQuery UI ボタン ウィジェットのいくつかのバグを修正するプラグインを作成し、Firefox のバグを少し前に回避しました。jQuery 以外の UI ボタンに適用するのは難しくありません。
label重要な部分を抽出し、 s内のネストされたチェックボックスに適合させました。
(function () {
var mdtarg, //last label mousedown target
mdchecked, //checked property when mousedown fired
fixedLabelSelector = '.fixedLabelCheckbox'; //edit as you see fit
$(document).on('mousedown', fixedLabelSelector, function (e) {
//only left clicks will toggle the label
if (e.which !== 1) return;
mdtarg = this;
mdchecked = this.control ? this.control.checked : $(this).find('input')[0].checked;
//reset mdtarg after mouseup finishes bubbling; prevents bugs with
//incorrect mousedown-mouseup sequences e.g.
//down IN label, up OUT, down OUT, up IN
$(document).one('mouseup', function () {
mdtarg = null;
});
}).on('mouseup', fixedLabelSelector, function (e) {
if (e.which !== 1) return;
if (mdtarg === this) {
var ch = this.control || $(this).find('input')[0];
//the click event is supposed to fire after the mouseup so
//we wait until mouseup and click finish bubbling and check if it
//had the desired effect
setTimeout(function () {
if (mdchecked === ch.checked) {
//else patch it manually
ch.checked = !ch.checked;
$(ch).change();
}
}, 0);
}
});
}());
Fiddleは Firefox でテスト済みです。
fixedLabelCheckbox上記のコードで修正したいチェックボックスを含むすべてのラベルにクラスを追加する必要があります。
スクリプトを配置する場所に関係なく機能し、ラベルに対応する委任されたクラス/セレクターがある限り、動的に追加されたチェックボックスも修正します。
他のライブラリを使用している場合、これは jQuery の外部にバインドされた変更ハンドラーを起動しない可能性があることに注意してください。
マークアップに余分なクラスを追加したくない場合は、このバージョンを使用できます (コードが増え、パフォーマンスが低下します)。
(function ($) {
function getControl(lbl) { //fallback for non-HTML5 browsers if necessary
return lbl.control || (lbl.htmlFor ? $('input[id="'+lbl.htmlFor+'"]')[0] : $(lbl).find('input')[0]);
}
var mdtarg, //last label mousedown target
mdchecked; //checked property when mousedown fired
$(document).on('mousedown', 'label', function (e) {
//only left clicks will toggle the label
if (e.which !== 1) return;
var ch = getControl(this);
if (!ch || ch.type !== 'checkbox') return;
mdtarg = this;
mdchecked = ch.checked;
//reset mdtarg after mouseup finishes bubbling; prevents bugs with
//incorrect mousedown-mouseup sequences e.g.
//down IN label, up OUT, down OUT, up IN
$(document).one('mouseup', function () {
mdtarg = null;
});
}).on('mouseup', 'label', function (e) {
if (e.which !== 1) return;
if (mdtarg === this) {
var ch = getControl(this);
//the click event is supposed to fire after the mouseup so
//we wait until mouseup and click finish bubbling and check if it
//had the desired effect
setTimeout(function () {
if (mdchecked === ch.checked) {
//else patch it manually
ch.checked = !ch.checked;
$(ch).change();
}
}, 0);
}
});
}(jQuery));
フィドル
上記のコードからわかるように、このバージョンはfor、余分なマークアップを追加することなく、ラベルの属性とラベル内のネストされた入力の両方で動作するはずです。
選択の無効化について:user-select質問にコメントされているように CSS に を配置するか、または をサポートしていないブラウザーuser-selectも懸念される場合は、選択を無効にするすべてのラベルにこの回答を適用できます。