В этом эксперименте исследуется конфликт двойной и тройной комбинации клавиш (например 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
местами" (если оно вообще работает) не подходит: предполагается, что на практике комбинации клавиш будут неоднократно переопределяться, потому никакой жесткой последовательности быть не должно.