Question

我在这里有一个jsfiddle：http://jsfiddle.net/zAFND/616

现在如果你在IE中打开小提琴（我使用的是IE9）和firefox，如果你双击一个复选框按钮，它会打开但不会将其关闭。但是如果你在opera，safarai和chrome中打开它，如果你快速连续点击或点击它就可以正常工作。

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

代码：

HTML：

<div id="ck-button"><label>
<input type="checkbox" name="options[]" id="optionA" value="A" /><span>A</span></label>
</div>

CSS：

#ck-button {
    margin:8px;
    background-color:#EFEFEF;
    border:1px solid #D0D0D0;
    overflow:auto;
    float:left;
    position: relative;
}

#ck-button label {
    float:left;
    width:4.0em;
    cursor:pointer;
}

#ck-button label span {
    text-align:center;
    padding:3px 0px;
    display:block;
}

#ck-button label input {
    position:absolute;
    top:-20px;
}

#ck-button input:checked + span {
    background-color:green;
    color:white;
}

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

Answer 1

这是Firefox中的一个错误。见Bug 608180 - Double/rapid clicking a checkbox label does not work as expected

IE由于历史原因（但在更新的版本中已修复）有一个错误的事件模型，它会在双击时跳过第二个mousedown和click事件。 See bug 263 - beware of DoubleClick in IE

我已经制作了一个plugin来修复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);
        }
    });
}());

在Firefox中测试了

Fiddle。

您必须将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));

Fiddle

从上面的代码中可以看出，此版本应该同时使用标签的for属性以及标签内的嵌套输入，而不添加任何额外的标记。

关于禁用选择：您可以将user-select放入问题中评论的CSS中，或者，如果还关注不支持user-select的浏览器，请应用{{3}在您要禁用选择的所有标签上。

Answer 2

您可以添加浏览器检测，然后，如果IE或Firefox，通过JS添加ondblclick event以反转复选框。

你不能无条件地设置它，因为一些浏览器（Safari，Chrome）传输两个click和一个dblclick，而其他浏览器（IE，Firefox）只传输一个click和一个dblclick。在前者上，两个click事件将两次反转该字段。在后者上，只有一个click事件触发，因此该字段只被反转一次;要减轻这种影响，您需要使dblclick反转该字段，以便两次点击将其反转偶数次。

希望这会有所帮助!!

单击快速多次复选框按钮不起作用

2 个答案: