移动鼠标

Question

我已经接近绝望，但我似乎无法找到任何解决方案。我基本上遇到了点击事件的问题，该事件以某种方式充当拖动事件。这很奇怪，因为据我所知，它确实不应该。

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

<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