jQuery单击事件仅在移动鼠标后才起作用

Question

我在这里快要绝望了，但我似乎找不到任何解决方案。我基本上对以某种方式充当 drag 事件的单击事件有疑问。这很奇怪，因为据我所知，它确实不应该。

让我解释一下是什么。我有这些简单的单选按钮：

<div class="fruitButtons">
  <input type="radio" name="radio" id="Apple">
    <label for="Apple">Apple</label>
  <input type="radio" name="radio" id="Banana">
    <label for="Banana">Banana</label>
  <input type="radio" name="radio" id="Citron">
    <label for="Citron">Citron</label>
</div>
<br><b>selected:</b>
<div class="status">none</div>

我使用 jQuery UI 通过$(".fruitButtons").buttonset(); 将这些常规按钮转换为漂亮的按钮集。

现在我需要重置按钮集的可能性，即一次取消选中所有按钮。因为我不想要一个单独的重置按钮，所以当你点击一个已经选中的按钮时，我需要重置。对我来说，这是处理这些单选按钮最直观的方式。

这是它应该工作的（显然简化的）方式：

$(function() {
    $(".fruitButtons").buttonset();
    var uncheck = apple = banana = citron = 0;

    $(".fruitButtons label").click(function(){
        var name = $(this).text();

        // see if button was previously checked
        // if yes set var 'uncheck' to 1
        if ((name == "Apple") && (apple)) uncheck = 1;
        if ((name == "Banana") && (banana)) uncheck = 1;
        if ((name == "Citron") && (citron)) uncheck = 1;
        apple = banana = citron = 0;

        if (!uncheck) {
            if (name == "Apple") apple = 1;
            if (name == "Banana") banana = 1;
            if (name == "Citron") citron = 1;

            // display name of currently checked button
            $(".status").text(name);
        }

        else {
            // unchecking the hidden input element
            $(this).prev().prop("checked", false);

            // resetting the buttonset to its initial state
            $(this).parent().buttonset("refresh");

            $(".status").text("none");
            uncheck = 0;
       }
    });
});

查看小提琴：http://jsfiddle.net/6yx0rqjf/6/

但问题是：取消选中的过程无法正常工作。事实上，它仅在您实际拖动鼠标同时单击时起作用，即如果您在按下鼠标按钮的同时移动鼠标一点。

每次单击按钮时，更新$(".status") 部分都可以正常工作，但只有稍微移动鼠标才能取消选中它。

这怎么可能？这是一个错误吗？我能够在 Firefox 40.0.3 和 Chrome 45.0.2454.85 上重现此行为。我还发现这个未解决的问题可能有某种关联： jQuery click event only working after moving the mouse in Chrome

那么，谁能帮我解决这个问题？这可能吗？

Answer 1

我认为问题在于您将点击处理程序放在标签上，而不是按钮本身。我将它移到按钮上，并调整了代码，它可以正常工作。

$(function() {

    var uncheck = apple = banana = citron = 0;

    $(".fruitButtons").buttonset();
    $(".fruitButtons :radio").click(function(){

        var name = $(this).next("label").text();

        // see if button was previously checked
        // if yes set var 'uncheck' to 1
        if ((name == "Apple") && (apple)) uncheck = 1;
        if ((name == "Banana") && (banana)) uncheck = 1;
        if ((name == "Citron") && (citron)) uncheck = 1;
        apple = banana = citron = 0;

        if (!uncheck) {
            if (name == "Apple") apple = 1;
            if (name == "Banana") banana = 1;
            if (name == "Citron") citron = 1;

            // display name of currently checked button
            $(".status").text(name);
        }

        else {
            // unchecking the hidden input element
            $(this).prop("checked", false);

            // resetting the buttonset to its initial state
            $(this).button("refresh");

            $(".status").text("none");
            uncheck = 0;
       }
    });

});

FIDDLE