使用滚动事件检测 KeyDown 和 KeyUp 上的修饰键答案

【问题标题】：Detecting Modifier Keys on KeyDown and KeyUp with Scroll Event使用滚动事件检测 KeyDown 和 KeyUp 上的修饰键
【发布时间】：2021-12-17 04:43:31
【问题描述】：

与solution 类似，我如何重新使用代码来包含 keyDown 和 keyUp 事件？我什至为每个KeyUp 和KeyDown 添加了一个，但是当用户按住并释放一个键并且来自原始 keyUp 事件的事件不再连续触发时会出现问题。

例子：

用户按住 Ctrl + Shift 键，这样 KeyDown 就会连续触发并打印 Ctrl + Shift 被按下。
用户在按住 Ctrl 的同时释放 Shift，因此 KeyUp 被触发一次，但 Ctrl 的 KeyDown 不再继续触发

我该如何改进呢？目的是将其与鼠标滚轮事件配对。如果 ctrl+mousewheel 则沿 x 轴缩放绘图。如果 Alt+moussewheel 则沿策略 Y 轴缩放。如果两者都或都不缩放 X 和 Y。最后，如何将此键修饰符事件与我提供的鼠标滚轮以响应方式配对？我注意到有时键事件会阻止滚动事件。

var scrollDelta = 0;
$(document).on("keydown",  reportKeyEvent("Pressed") );
$(document).on("keyup",  reportKeyEvent("Released") );
$(document).bind("wheel", updateScroll);

function reportKeyEvent (e, eventName) {
    var keyStr = ["Control", "Shift", "Alt"].includes(e.key) ? "" : e.key + " ";
    var out =
        eventName + " " +
        ( e.ctrlKey  ? "Control " : "" ) +
        ( e.shiftKey ? "Shift "   : "" ) +
        ( e.altKey   ? "Alt "     : "" ) +
        keyStr + "key(s)"
    ;
    console.log(out)
    
    ctrlKeyPressed = e.ctrlkey;
    shiftKeyPressed = e.shiftkey;
    altKeyPressed = e.altkey;

    // add shift+scroll?
    // add ctrl+scroll?
   
    e.stopPropagation ();
    e.preventDefault ()
}

function updateScroll(e){
    if(e.deltaY < 0){
        scrollDelta +=50;
    }else if (e.delaY > 0){
        scrollDelta -=50;
    }else{
        scrollDelta = 0;
    }
}

【问题讨论】：

通常您可以通过 e.ctrlKey、e.shiftKey 和 e.metaKey 在 javascript 中获取 ctrl、shift 和苹果键信息
我在示例代码中有，但 keyUp 会阻止 keyDown 事件。
我认为您需要将现在由 keyDown 事件激活的代码移动到计时器（请参阅 setInterval）。您可以维护/监视哪些键已关闭并清除所有键都已启动的时间间隔
对不起，我没有关注。听起来我会改变我的 keydown 方法来启动间隔方法。该方法将包含什么？您能否提供一个小示例或伪代码与您的方法？

标签： javascript events mouseevent keyboard-events

【解决方案1】：

您可以保留您的 reportKeyEvent 功能。只需更改为使用间隔而不是事件

var keydownIntervalID;
var keys = new Set();

$(document).keyDown(function(e) {
  keys.add(e.keyCode);
  if (!keydownIntervalID) {
    keydownIntervalID = setTimeout(reportKeyEvent, 50);
  }
});
$(document).keyUp(function(e) {
  keys.delete(e.keyCode);
  if (keys.size === 0) {
    clearInterval(keydownIntervalID);
    keydownIntervalID = undefined;
  }
});

【讨论】：