CODEWITHSUNDEEP
javascriptjquery
Lennart
Lennart

Reputation: 1560

JS trigger keydown event

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?

Upvotes: 1

Views: 10426

Answers (1)

Simon Smith
Simon Smith

Reputation: 8044

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/

Upvotes: 11

Related Questions