"Как я могу отредактировать этот код, чтобы функция functForward запускалась только один раз при нажатии и удерживании клавиши?"
Все современные браузеры поддерживают addEventListener()
, поэтому attachEvent()
не требуется, если вы не собираетесь делать свое собственное событие.Вкратце: не просто редактируйте код, который вы имеете, используйте что-то более упорядоченное и более простое для понимания.
Функции funcForward и funcStopDrive не определены в предоставленном коде, невозможно редактировать код вокруг неизвестной функциипытаясь отредактировать код, чтобы заставить работать неизвестные функции.
Еще раз удерживая клавишу, таинственная функция X делает что-то, когда клавиша удерживается нажатой.Как можно измерить это в параметре расстояния, времени или состояния, не имея ни малейшего понятия, что делает функция X и как она выполняется?
В следующей демонстрации:
Есть 3 события и 3 обработчика событий.У каждого из них есть свой класс с анимированными стилями.
Убедитесь, что тестовая область сфокусирована (щелкните в любом месте области, чтобы сделать это).
просто нажмите пробел .
Попробуйте нажать пробел один раз, когда струя наполовину коснитесь пробела сноваэто выглядит круто.
Демо
var jet = document.querySelector('.fa-fighter-jet');
document.addEventListener('keydown', climb)
document.addEventListener('keypress', cruise);
document.addEventListener('keyup', dive);
jet.focus();
function climb(e) {
var key = e.which || e.keyCode;
if (key === 32) {
jet.classList.toggle('up');
}
}
function cruise(e) {
var key = e.which || e.keyCode;
if (key === 32) {
jet.classList.toggle('go');
}
}
function dive(e) {
var key = e.which || e.keyCode;
if (key === 32) {
jet.classList.toggle('down');
}
}
.fa {
display: block;
}
.up {
transform: translate(500px, -200px);
transition: .75s ease-in;
}
.go {
transform: translateX(500px);
transition: .75s ease-out;
}
.down {
transform: translate(500px, 200px);
transition: .75s ease-in;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<i class='fa fa-fighter-jet fa-2x'></i>