KeyDown与KeyUp事件检测修饰键结合滚轮事件的实现与优化

现有代码存在几个核心问题导致异常：

• 事件绑定写法错误：$(document).on("keydown", reportKeyEvent("Pressed")) 是直接执行了reportKeyEvent并将返回值作为回调，而非传入函数引用
• 修饰键状态拼写错误：e.ctrlkey 应为 e.ctrlKey（大小写敏感），会导致状态记录完全失效
• 错误阻止默认行为+冒泡：按键事件里直接调用e.preventDefault()和e.stopPropagation()，不仅会打断系统默认的按键重复触发逻辑，还会阻塞后续事件队列导致滚轮事件响应卡顿
• 依赖keydown重复触发记录状态是错误逻辑：浏览器的按键重复触发策略本身就会在组合键松开其中一个时中断重复触发，不需要依赖keydown的持续触发来维护修饰键状态，只需要在keyup/keydown触发时更新全局状态即可

核心逻辑：单独维护全局修饰键状态，仅在keydown、keyup触发时更新状态，不依赖重复keydown事件；滚轮事件触发时直接读取当前最新的修饰键状态判断缩放逻辑，不需要和按键事件耦合。

// 全局维护修饰键状态，默认全为false
const modifierKeys = {
  ctrl: false,
  shift: false,
  alt: false
}
let scrollDelta = 0;

// 复用的按键状态更新函数，同时支持keydown、keyup
function updateModifierStatus(e, eventType) {
  // 直接从事件对象读取最新的修饰键状态，比判断e.key更可靠
  modifierKeys.ctrl = e.ctrlKey;
  modifierKeys.shift = e.shiftKey;
  modifierKeys.alt = e.altKey;

  // 仅调试用日志，生产环境可删除
  const keyStr = ["Control", "Shift", "Alt"].includes(e.key) ? "" : e.key + " ";
  console.log(`${eventType} ${e.ctrlKey ? "Control " : ""}${e.shiftKey ? "Shift " : ""}${e.altKey ? "Alt " : ""}${keyStr}key(s)`);
}

function updateScroll(e){
  // 仅按需阻止浏览器默认滚轮行为（比如页面滚动），避免和图表缩放冲突
  e.preventDefault();
  
  const delta = e.deltaY < 0 ? 50 : -50;
  scrollDelta += delta;

  // 按修饰键状态判断缩放逻辑
  if (modifierKeys.ctrl && !modifierKeys.alt) {
    // 调用你的图表X轴缩放逻辑
    console.log("仅缩放X轴", scrollDelta);
  } else if (modifierKeys.alt && !modifierKeys.ctrl) {
    // 调用你的图表Y轴缩放逻辑
    console.log("仅缩放Y轴", scrollDelta);
  } else {
    // 调用你的图表XY轴同时缩放逻辑
    console.log("同时缩放X+Y轴", scrollDelta);
  }
}

// 修正事件绑定，传入函数引用而非直接执行
$(document).on("keydown", (e) => updateModifierStatus(e, "Pressed"));
$(document).on("keyup", (e) => updateModifierStatus(e, "Released"));
// 优先用on而非bind，jQuery 3.0之后bind已经被弃用
$(document).on("wheel", updateScroll);

// 新增窗口失焦时重置状态，避免用户切走页面松开按键没触发keyup导致状态异常
$(window).on("blur", () => {
  Object.keys(modifierKeys).forEach(key => modifierKeys[key] = false);
});

• 移除按键事件里不必要的preventDefault和stopPropagation，避免阻塞事件循环，仅在滚轮事件里按需阻止默认滚动行为即可
• 不要在按键事件回调里做 heavy 计算，所有和缩放相关的逻辑都放到滚轮事件里执行，按键事件只做最简单的状态更新
• 如果图表缩放本身有性能问题，可以给缩放逻辑加防抖，避免滚轮滚动过快导致频繁重绘
• 直接从事件对象的ctrlKey/shiftKey/altKey属性读取状态，比自己判断e.key更新状态更可靠，也不会出现组合键松开后状态错误的问题

内容的提问来源于stack exchange，提问作者DawnAxolotl