Флажок на 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.Чтобы исправить этот перехватчик обработчик событий на 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