mousedown 上的复选框，mouseup 上取消选中

Question

我正在制作 jQuery 应用程序，其中有一个只有在 mouse/key/touch 被按下时才会被选中的复选框。选中 mousedown，取消选中 mouseup。

即使我使用 event.preventDefault()，如果鼠标按钮未按下，复选框仍处于选中状态，但空格键可以正常工作。

$(function() {
  var cb = $("input");
  cb
    .on("mousedown keydown", function(event) {
      event.preventDefault();
      cb.prop("checked", true);
    })
    .on("mouseup keyup", function(event) {
      event.preventDefault();
      cb.prop("checked", false);
    });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type=checkbox autofocus>

我知道上面的代码需要一些工作才能在任何情况下（触摸等）正常工作，但它仅用于测试目的

Answer 1

问题是因为 click 事件在复选框上释放 mouseup 时触发，这迫使 checked 属性变为 true。要修复此挂钩事件处理程序到 click 并简单地在其上调用 preventDefault()。

另请注意，您可以向 on() 提供一个对象，该对象以您要挂钩的事件名称为键，而不是多次调用 on()：

$(function() {
  var $cb = $("input");
  $cb.on({
    "mousedown keydown": function(e) {
      e.preventDefault();
      $cb.prop("checked", true);
    },
    "mouseup keyup": function(e) {
      e.preventDefault();
      $cb.prop("checked", false);
    },
    'click': function(e) {
      e.preventDefault();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type=checkbox autofocus>

或者，正如@enapupe 在评论中指出的那样，您可以完全删除 mouseup 事件处理程序，让默认的 click 事件运行正常切换状态复选框：

$(function() {
  var $cb = $("input");
  $cb.on({
    "mousedown keydown": function(e) {
      e.preventDefault();
      $cb.prop("checked", true);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type=checkbox autofocus>

两者都可以，这仅取决于您希望在抑制 click 事件时采取的行为

mousedown 上的复选框，mouseup 上取消选中

Checkbox on mousedown, uncheck on mouseup

javascript

checkbox

jquery

preventdefault

jquery-events