处理鼠标点击和按键或按键事件(对于非修改键)

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

我是 JS 的新手,正在尝试自学 - 感谢您的帮助!

我正在尝试让一个简单的程序根据鼠标单击时按下的其他键以不同方式响应单击。

我进行了广泛的搜索,但未能找到适用于非修饰键 alt 和 shift 的答案(我在实现时没有遇到任何问题)。但是,我一辈子都想不出如何使用常规字符键获得相同的结果。

如果使用 alt 键,

The example below (which I found in other comments on this site) 有效。

<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
    }
  });
});

但是,直观的修改不起作用。

例如,其他相同的代码(现在使用 event.keyCode===114)在 'r' 键时不起作用 (?!)被按下(event.charCode===114 也不行):

 <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
            }
          });
        });

出了什么问题?

如果我单独聆听,我可以从 keyPress 中获得功能:

addEventListener("keypress", rIsPressed, false);

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

然而,当我尝试将字符按键与鼠标点击配对,甚至将字符按键与修饰键配对时,似乎没有任何效果:

addEventListener("keypress", rIsPressed, false);

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

注意:在所有这些示例中,我都尝试过使用 keydown 而不是 keypress,但都没有成功。

请就我遗漏或忽略的内容提出建议 - 将字符键 down/press 与修改键或鼠标点击配对有什么问题!?

谢谢!!

正如我在上面评论的那样,点击事件没有名为 keyCode 的 属性,因此 event.keyCode 将不起作用。 control 和 alt 起作用的唯一原因是因为它们是单击事件 event.ctrlKeyevent.altKey 的属性。你可以更有创意一点,使用类似这样的东西,虽然我真的不知道你需要什么:

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;
});

这会在 keydown 被触发时存储键码,当 keyup 被触发时它会清除 var。单击事件中的内容仅允许 运行 如果 var 显示的内容不是 null。