How do I distinguish pressing a button from releasing a button, in JavaScript?

Question

This is what I tried:

function move(e)
{
   if (e.keyCode==32)
   {
     up=0;
     bottonup=650;
     var temp="rect("+up+"px,auto,"+bottomup+"px,auto)";
     rect2.style.clip=temp;
   }
}
function move2(d){
  if (d.keyCode==32)
  {
    up=0;
    bottonup=0;
    var temp="rect("+up+"px,auto,"+bottomup+"px,auto)";
    rect2.style.clip=temp;
  }
}
document.onkeydown=move;
document.onkeyup=move2;

My problem is when I press a button or release a button, the transition starts again and because of that, the animation slips.

Answer 1

When working with animation you usually need some kind of condition logic. For ex: waiting for the animation to finish before triggering it again.

let pressed = false

function down () {
    // isAnimationDone -> holding key will not re-trigger animation if it's not finish
    // pressed -> wait for the key to be release before being able to call the animation again
    if (!pressed && isAnimationDone) {
      // do animation
      pressed = true
    }
}

function up () {
  pressed = false
}

Answer 2

Every Events has a type . Check against it.

 const EventType = { keyup: "keyup", keydown: "keydown" } const move = (event) => { if (event.keyCode === 13) { if (event.type === EventType.keydown) { console.log(`${event.code} is pressed.`) } else if (event.type === EventType.keyup) { console.log(`${event.code} is released.`) } } } document.body.onkeydown = move document.body.onkeyup = move

Press Enter to test the code.