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。要解决此问题，请将事件处理程序挂接到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事件的行为

按下鼠标时为复选框，不按下鼠标则为复选框

1 个答案: