Как я могу проверить флажок с событием mousedown?

Question

У меня есть следующий код:

checkbox.addEventListener('mousedown', function () {
    if (!this.checked) {
        this.checked = true;
    }
});

Должен быть установлен флажок, когда кнопка мыши нажата.И это работает отлично, но когда я отпускаю кнопку, флажок снова отключается.Как я могу это исправить?

Answer 1

checkbox.addEventListener('mousedown', function(){
    this.checked = !this.checked;
});

Answer 2

Обратите внимание, что флажки уже имеют это поведение по умолчанию, встроенное в него браузерами.Если вы хотите увидеть, установлен ли флажок или нет, вы можете просто посмотреть на свойство checked элемента DOM.Например:

const checkbox = document.getElementById('Mycheckbox');

// this onclick now purely for demonstration purposes
checkbox.addEventListener('click', function () {
    console.log(checkbox.checked);
});

<input type="checkbox" id="Mycheckbox"/>

Answer 3

checkbox.addEventListener('mousedown', function(){
    if(!this.checked) {
        var preventUnselect = function(){
            this.checked = true;            
            checkbox.removeEventListener('click', preventUnselect)
        };
        checkbox.addEventListener('click', preventUnselect)
        this.checked = true;
    }
});

<input type="checkbox" id="checkbox"/>

Я почти уверен, что ваш флажок снят, поскольку по умолчанию флажок изменяет свое состояние после щелчка.Если вы установите флажок после mousedown, то после завершения события click его состояние переключится (снова станет не проверенным).Просто установите флажок и переместите указатель за его пределы, продолжая удерживать левую клавишу мыши - флажок не будет снят, когда вы отпустите кнопку.

Вы должны привязать событие щелчка после mousedown и удалитьсобытие после.Если событие не было удалено, ваш флажок будет установлен навсегда.