JS trigger keydown event

Question

I'm slightly confused why this code isn't working:

$(document).keydown(function(e){
        if (e.keyCode == 39) {
            //RIGHT
            document.getElementById('col_detector_right').innerHTML="";
            col_jack('right');
            if(document.getElementById('col_detector_right').innerHTML!=""){
            }
            else{
                var left = document.getElementById('jack').style.left;
                var current_left = parseFloat(left);
                var new_left = current_left + 400;

                document.getElementById('jack').style.left = new_left+'px';
            }
            right = true;
            return false;
        }
        if (e.keyCode == 37) {
            //LEFT
            document.getElementById('col_detector_right').innerHTML="";
            col_jack('right');
            if(document.getElementById('col_detector_right').innerHTML!=""){
            }
            else{
                var left = document.getElementById('jack').style.left;
                var current_left = parseFloat(left);
                var new_left = current_left - 4;

                document.getElementById('jack').style.left = new_left+'px';
            }
            right = false;
            return false;
        }
        if (e.keyCode == 38) {
            //UP
            return false;
        }
        if (e.keyCode == 40) {
            //DOWN
            return false;
        }
        if (e.keyCode == 32) {
            //SPACE
            if(right==true){
                var top = document.getElementById('jack').style.top;
                var current_top = parseFloat(top);
                var new_top = current_top -40;

                document.getElementById('jack').style.top = new_top+'px';
                var left = document.getElementById('jack').style.left;
                var current_left = parseFloat(left);
                var new_left = current_left + 20;

                document.getElementById('jack').style.left = new_left+'px';
                right=false;
                var press = $.Event('keydown');
                press.which = 39;
                $(document).trigger(press);
            }
            else{
                var top = document.getElementById('jack').style.top;
                var current_top = parseFloat(top);
                var new_top = current_top -40;

                document.getElementById('jack').style.top = new_top+'px';
            }

            return false;
        }
    });

specificly this bit, is not working:

var press = $.Event('keydown');
press.which = 39;
$(document).trigger(press);

why? the idea is that it should trigger the right arrow key but it's not? Nothing is happening, it's either not triggering it or it's not checking the keydown event properly? I don't know which or is it something else?

I've never invoked events in Javascript, but I would suggest checking this out: http://stackoverflow.com/a/203262/947514 You could try setting the keyCode of press, but in general it may not work let alone work in all browsers. — Shawn Khameneh, Feb 22 '12 at 19:34
keypress doesn't work either unfornately, I don't why the above code isn't working — Lennart, Feb 22 '12 at 19:38

score 11 · Accepted Answer · answered Feb 22 '12 at 20:12

11

You need to pass an object of properties to the jQuery Event object, like so:

  // Create a new jQuery.Event object with specified event properties.
  var e = jQuery.Event("keydown", { keyCode: 64 });

  // trigger an artificial keydown event with keyCode 64
  jQuery("body").trigger( e );

Read the API docs for $.Event - http://api.jquery.com/category/events/event-object/

answered Feb 22 '12 at 20:12

Simon Smith

8,024
2
30
40

1

Thanks that seems to work, but unfortunately thats not solving the problem that I have, I was hoping this would solve it but it doesn't, the thing is after the person presses space and right arrow key jack is ment to jump to the right, now he does that but I continue holding the right arrow but jack doesn't move any further, I have to release the arrow key and then press it again, I hope you understand this, rather difficult to explain but do you have a solution for that? – Lennart Feb 22 '12 at 21:59

JS trigger keydown event

1 Answers1

Linked