触控板捏合触发带ctrlKey=true的wheel事件，如何判断用户是否真按Ctrl？

方案1：利用事件的deltaMode与deltaX/deltaY比例特征 #

触控板捏合手势触发的wheel事件，deltaX和deltaY通常会成近似等比例变化（因为捏合是双向缩放动作）；而真正按住Ctrl键滚动时，一般只有单一方向的增量（比如上下滚动仅deltaY变化，左右滚动仅deltaX变化）。

示例代码：

window.addEventListener('wheel', (e) => {
  if (e.ctrlKey) {
    // 计算delta绝对值的比例，阈值可根据实际场景调整
    const deltaRatio = Math.abs(e.deltaX / e.deltaY);
    const isPinch = deltaRatio > 0.8 && deltaRatio < 1.2 && e.deltaMode === 0;

    if (isPinch) {
      // 处理触控板捏合逻辑
      console.log('触发触控板捏合');
      e.preventDefault(); // 阻止浏览器默认缩放行为
    } else {
      // 处理Ctrl+滚动逻辑
      console.log('按住Ctrl键滚动');
    }
  }
});

方案2：通过Pointer Events跟踪触控点数量 #

现代浏览器支持Pointer Events，可以通过页面上的活跃触控点数量判断：

• 触控板捏合时，会同时触发2个pointerdown事件（对应双指操作）
• 单纯Ctrl+滚动时，仅存在1个活跃触控点（鼠标或单指触控板）

示例代码：

let activePointerCount = 0;

// 跟踪活跃触控点数量
window.addEventListener('pointerdown', () => activePointerCount++);
window.addEventListener('pointerup', () => activePointerCount = Math.max(0, activePointerCount - 1));
window.addEventListener('pointercancel', () => activePointerCount = Math.max(0, activePointerCount - 1));

window.addEventListener('wheel', (e) => {
  if (e.ctrlKey) {
    if (activePointerCount >= 2) {
      console.log('触发触控板捏合');
      e.preventDefault();
    } else {
      console.log('按住Ctrl键滚动');
    }
  }
});

注意：部分浏览器对触控板的Pointer Events支持存在差异，需测试适配。

方案3：修正按键状态跟踪的失焦缺陷 #

如果偏好按键跟踪方法，可以通过窗口聚焦时重新校验按键状态，解决窗口失焦导致的状态错误：

let ctrlKeyPressed = false;

// 基础按键监听
window.addEventListener('keydown', (e) => {
  if (e.key === 'Control') ctrlKeyPressed = true;
});
window.addEventListener('keyup', (e) => {
  if (e.key === 'Control') ctrlKeyPressed = false;
});

// 窗口聚焦时重新验证Ctrl键真实状态
window.addEventListener('focus', async () => {
  if (navigator.keyboard) {
    const layoutMap = await navigator.keyboard.getLayoutMap();
    // 结合焦点状态判断按键是否真的被按下
    ctrlKeyPressed = layoutMap.has('Control') && document.hasFocus();
  }
});

window.addEventListener('wheel', (e) => {
  if (e.ctrlKey) {
    if (!ctrlKeyPressed) {
      console.log('触发触控板捏合');
      e.preventDefault();
    } else {
      console.log('按住Ctrl键滚动');
    }
  }
});

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