如何用JavaScript检测Apple Magic Mouse/触控板的双指触摸事件？

你之前用的touchstart事件是针对触屏设备的触摸操作，不适用于Magic Mouse或触控板的双指操作，这类设备的双指滚动/滑动需要通过wheel事件来检测。

核心实现思路 #

• 使用wheel事件监听双指操作：Magic Mouse的双指滚动、触控板的双指滑动都会触发该事件
• 通过事件对象的deltaX/deltaY获取横向/纵向偏移量，正负值对应不同移动方向
• 维护元素的当前位置，根据偏移量更新并应用transform: translate()实现移动
• 调用e.preventDefault()阻止页面默认滚动行为，避免干扰元素移动

基础代码示例 #

const targetEl = document.getElementById('area');
// 初始化元素位置
let currentX = 0;
let currentY = 0;

targetEl.addEventListener('wheel', function(e) {
  // 阻止页面默认滚动
  e.preventDefault();

  // 调整系数控制移动速度，可根据需求修改
  const speed = 0.5;
  currentX += e.deltaX * speed;
  currentY += e.deltaY * speed;

  // 应用transform移动元素
  targetEl.style.transform = `translate(${currentX}px, ${currentY}px)`;
});

进阶：严格检测双指操作 #

如果需要只响应双指操作（排除单指滚动），可以结合Pointer Events记录当前触摸指针数量：

const targetEl = document.getElementById('area');
let currentX = 0;
let currentY = 0;
let pointerCount = 0;

// 记录指针数量
document.addEventListener('pointerdown', () => pointerCount++);
document.addEventListener('pointerup', () => pointerCount--);

targetEl.addEventListener('wheel', function(e) {
  // 仅处理双指操作
  if (pointerCount !== 2) return;
  
  e.preventDefault();
  const speed = 0.5;
  currentX += e.deltaX * speed;
  currentY += e.deltaY * speed;
  targetEl.style.transform = `translate(${currentX}px, ${currentY}px)`;
});

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