前端开发：如何区分触发wheel事件的设备是鼠标滚轮还是触控板？

wheel事件本身没有直接提供设备类型标识，但可以通过事件的delta属性特征和触发频率来区分鼠标与触控板操作，进而实现你需要的交互逻辑：

核心判断逻辑 #

• 鼠标滚轮：
  • 单次事件的deltaY通常是较大的整数值（比如±100，不同浏览器略有差异），deltaX一般为0
  • 事件触发间隔较长，不会连续高频触发
• 触控板操作：
  • 双指平移：deltaX和deltaY同时不为0，且数值绝对值较小（比如±1~±10）
  • 捏合缩放：deltaY（部分浏览器用deltaZ）为小步长数值，可能伴随其他轴的微小变化，且事件会连续高频触发

代码实现示例 #

在事件处理函数中加入判断逻辑，同时记录事件触发间隔辅助区分：

let lastWheelTime = 0;
const MIN_INTERVAL = 100; // 鼠标滚轮的典型触发间隔（可按需调整）
const LARGE_DELTA_THRESHOLD = 50; // 区分鼠标与触控板的delta阈值

function handleWheel(e) {
  e.preventDefault(); // 阻止默认页面滚动/缩放，避免干扰自定义交互
  const currentTime = Date.now();
  const timeDiff = currentTime - lastWheelTime;
  lastWheelTime = currentTime;

  // 判断是否为鼠标滚轮触发
  const isMouseWheel = Math.abs(e.deltaY) > LARGE_DELTA_THRESHOLD && e.deltaX === 0 && timeDiff > MIN_INTERVAL;
  
  // 判断是否为触控板双指平移
  const isTouchpadPan = Math.abs(e.deltaX) > 0 && Math.abs(e.deltaY) > 0 && Math.abs(e.deltaY) <= LARGE_DELTA_THRESHOLD;
  
  // 判断是否为触控板捏合缩放
  const isTouchpadZoom = !isTouchpadPan && Math.abs(e.deltaY) <= LARGE_DELTA_THRESHOLD;

  if (isMouseWheel || isTouchpadZoom) {
    // 执行缩放逻辑
    const direction = e.deltaY > 0 ? 'zoomOut' : 'zoomIn';
    // 调用你的缩放函数，比如 zoom(direction);
  } else if (isTouchpadPan) {
    // 执行平移逻辑
    const panX = e.deltaX;
    const panY = e.deltaY;
    // 调用你的平移函数，比如 pan(panX, panY);
  }
}

node.addEventListener('wheel', handleWheel);

注意事项 #

• 不同浏览器和设备的delta值存在差异，建议在目标设备上测试调整阈值（LARGE_DELTA_THRESHOLD和MIN_INTERVAL）
• 部分触控板的捏合操作会触发deltaZ而非deltaY，可同时监听deltaZ的值做兼容处理
• 必须调用e.preventDefault()，否则浏览器默认的页面滚动/缩放会覆盖你的自定义交互

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