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

Question

我正在制作 jQuery 应用程序，其中有一个只有在按下鼠标/键/触摸时才会选中的复选框。选中 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 。要修复此 Hook 事件处理程序到 click 并简单地对其调用 preventDefault()。

另请注意，您可以向 on() 提供一个对象，该对象以您要 Hook 的事件名称为键，而不是多次调用 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 事件方面的行为