Javascript 多次快速单击复选框按钮时，复选框按钮无法正常工作

我这里有一个JSFIDLE：

现在，如果你在IE（我使用IE9）和firefox中打开fiddle，如果你双击一个复选框按钮，它会打开，但不会关闭。但是，如果你在opera、safarai和chrome中打开它，如果你双击或快速连续点击，效果会很好

我的问题是如何让快速连续点击在firefox和IE9中正常工作

代码：

HTML:

Jquery/javasscript：

 $(document).ready(function(){
            $("body").css("-webkit-user-select","none");
            $("body").css("-moz-user-select","none");
            $("body").css("-ms-user-select","none");
            $("body").css("-o-user-select","none");
            $("body").css("user-select","none");
    });

---

您可以添加浏览器检测，然后，如果是IE或Firefox，则添加via JS以反转复选框

您不能无条件地设置它，因为一些浏览器（Safari、Chrome）只传输两个

点击和一个
dblclick
，而其他浏览器（如Firefox）只传输一个
点击和一个
dblclick
。对于前者，两个
单击事件将反转字段两次。在后者上，仅触发一个
单击
事件，因此该字段仅反转一次；为了缓解这种情况，需要使
dblclick
反转字段，以便两次单击将其反转偶数次

希望这有帮助
 这是Firefox中的一个bug。看

由于历史原因（但在较新版本中已修复），IE有一个有缺陷的事件模型，该模型在双击时跳过第二个
mousedown
和
click
事件

不久前，我做了一个修复jQueryUI按钮小部件中的一些错误以及解决Firefox错误的方法，将其应用于非jQueryUI按钮应该不难

提取重要部分并将其调整为
标签内的嵌套复选框：

(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);
        }
    });
}());

在Firefox中测试

您必须将
fixedLabelCheckbox
类添加到包含要用上述代码修复的复选框的所有标签中

无论您将脚本放在何处，它都将工作，并且只要标签具有相应的委托类/选择器，它还将修复动态添加的复选框

注意，如果您正在使用其他库，这可能不会触发jQuery外部绑定的更改处理程序

如果您不想向标记中添加额外的类，可以使用此版本（更多代码，更少性能）：


从上面的代码中可以看出，此版本应与标签的
for
属性以及标签内的嵌套输入一起使用，而无需添加任何额外的标记


关于禁用选择：您可以按照问题中的注释，将
用户选择
放在CSS中，或者，如果浏览器不支持
用户选择
，也可以应用到您希望禁用选择的所有标签上。
快速双击在firefox中对我有效，尽管“无选择”按钮事实并非如此。作为CSS添加，它们可以工作@showdev我使用的是firefox的18.01版本，你使用的是哪一个？事实上，我在firefox的旧版本中看到了这个问题。Fabricio Matté的有趣回答。我能问一下如何检测浏览器吗？好的，这看起来很酷，只要在编辑过程中你能告诉我相关代码应该放在哪里，那就可以了awesome@user2048994我没有在IE上测试小提琴，但试了一下。
 $(document).ready(function(){
            $("body").css("-webkit-user-select","none");
            $("body").css("-moz-user-select","none");
            $("body").css("-ms-user-select","none");
            $("body").css("-o-user-select","none");
            $("body").css("user-select","none");
    });

(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);
        }
    });
}());

(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));