Handling events for mouse click and keydown or keypress (for non-modifier keys)

Question

I am new to JS and trying to learn on my own - thanks for any help!

I am trying to have a simple program respond to a click differently depending on what other key is pressed at the time of the mouse click.

I have searched far and wide and have not been able to find an answer that works for non-modifier keys alt and shift (which I have had no trouble implementing). However, I can't for the life of me figure out how to achieve the same result with a regular character key.

The example below (which I found in other comments on this site) works if the alt key is employed.

<div id="targetDiv">I want to put a ding in the universe.</div>

$(function() {
  $("#targetDiv").click(function(event) {
    if (event.altKey) {
       //do something, alt was down when clicked
    }
  });
});

However, the intuitive modification does not work.

For example, the otherwise identical code (now using event.keyCode===114) does not work (?!) when the 'r' key is pressed (nor does event.charCode===114 do the trick):

 <div id="targetDiv">I want to put a ding in the universe.</div>
    $(function() {
          $("#targetDiv").click(function(event) {
            if (event.keyCode===114) {
               //do something, alt was down when clicked
            }
          });
        });

What went wrong?

I am able to get functionality out of a keyPress if I listen to it alone:

addEventListener("keypress", rIsPressed, false);

function rIsPressed(event){
    if(event.keyCode===114){    
    console.log("the 'r' key is pressed");
    }
}

however nothing seems to work when I try to pair a character keypress with a mouse click or even a character keypress with a modifier keypress:

addEventListener("keypress", rIsPressed, false);

function rIsPressed(event){
    if((event.keyCode===114) && (event.altKey)){    
    console.log("the 'alt' and 'r' keys are pressed");
    }
}

Note: I have tried keydown instead of keypress in all of these examples with no success.

Suggestions please on what I am missing or overlooking - what is problematic about pairing a character key down/press with a modifier key or a mouse click !?

Thank you!!

Answer 1

As I commented above, the click event does not have a property called keyCode so doing event.keyCode will not work. The only reason that control and alt work is because they are properties of the click event, event.ctrlKey and event.altKey. You can be a little more creative and use something like this maybe though I don't really know what you need:

var currKey = null;

$("#targetDiv").click(function (event) {
    if (currKey != null) {
        $("#targetDiv").text(currKey);
    }
});
$(window).keydown(function (event) {
    currKey = event.which;
});
$(window).keyup(function (event) {
    currKey = null;
});

This stores the key code when keydown is fired, when keyup is fired it clears the var. The stuff in the click event is only allowed to run if the var shows something other than null.