JavaScript: конфликт двойной и тройной комбинации клавиш

380

07 июня 2017, 05:35

В этом эксперименте исследуется конфликт двойной и тройной комбинации клавиш (например alt+t и alt+shift+t). По замыслу, при нажатии alt+t должен измениться цвет левого квадрата, а при нажатии alt+shift+t - правого. Однако конбинация alt+t препятствует срабатыванию alt+shift+t, даже при корректной последовательности нажатия клавиш:

(В снипетте почему-то вообще ничего не работает, но в JSFiddle - заработает после клика мышью на поле результата. Это потому, что используются плавающие фреймы)

let $leftRect =  $('.rec1'); 
let $rightRect =  $('.rec2'); 
 
$leftBtn.on('mousedown', function(){ 
    $leftRect.css('background', 'DarkCyan'); 
}); 
 
$leftBtn.on('mouseup', function(){ 
    $leftRect.css('background', '#ff6666'); 
}); 
 
 
document.onkeydown = function(e){ 
    if (e.altKey && e.keyCode === 84) { // T     
        $leftRect.css('background', 'DarkCyan'); 
    } 
    else if (e.altKey && e.shiftKey && e.keyCode === 84) { // T     
        $rightRect.css('background', 'DarkCyan'); 
    } 
};

.rec1{ 
    display: inline-block; 
    width: 100px; 
    height: 100px; 
    background:#ff6666; 
} 
 
.rec2{ 
    display: inline-block; 
    width: 100px; 
    height: 100px; 
    background:#ff6666; 
}

<div class="rec1"></div> 
<div class="rec2"></div>

Как убрать этот конфликт?

Решение "поменять if и else if местами" (если оно вообще работает) не подходит: предполагается, что на практике комбинации клавиш будут неоднократно переопределяться, потому никакой жесткой последовательности быть не должно.

Answer 1

У вас проблема ровно в том, что вы почему-то с порога отвергаете правильное решение.
Именно поменять местами и никак иначе. Вы должны сначала проверять тройные нажатия (в любом порядке), а потом двойные (в любом порядке). Проверка должна быть оформлена простыми блоками if (без колбасы else if).
Каждый if должен включать return после выполнения нужного кода.

document.onkeydown = function(e){
    if (e.altKey && e.shiftKey && e.keyCode === 84) { // T    
        $rightRect.css('background', 'DarkCyan');
        return; 
    }
    // еще тройные блоки...
    if (e.altKey && e.keyCode === 84) { // T    
        $leftRect.css('background', 'DarkCyan');
        return;
    }
    // еще двойные блоки...
};