Отменить действие e.preventDefault();

152

15 января 2021, 13:20

Есть input checkbox. Необходимо ставить галочку только если была нажата клавиша Shift хотя бы один раз.
Выбираем input. Проверяем нажатие Shift.

    let box = document.querySelectorAll('input');
    let shiftKey = false;
    document.addEventListener('keydown', (e) => {
      if(e.keyCode === 16){ return shiftKey = true}
    })

e.preventDefault() убирает галочку, даже когда e.target.setAttribute('checked','');

    box.forEach(function(v,i,a) {
        a[i].addEventListener('click', function(e) {
            e.preventDefault();
            if(shiftKey === true) {
                e.target.setAttribute('checked','');
            }
        });
    });

В консоли checked ставится. . Получается input с checked, но в браузере эта галочка не отображается.

Answer 1

Во-первых, вам не нужно сравнивать значение, которое содержит true или false с true. Вызов e.preventDefault() не позволит переключить чекбокс, поэтому его стоит вызвать, если клавиша shift не была нажата ни разу.

box.forEach(input => {
    input.addEventListener('click', function(e) {
        if (!shiftKey) {
            e.preventDefault();
        }
    });
});