如何检测用户点击来源及区分鼠标与触控板的不同点击类型

嘿，这个问题问到点子上了！很多时候我们默认点击就是鼠标左键，但实际用户的输入设备五花八门，要精准区分确实需要做点功课。下面我就用前端JavaScript的场景给你唠唠怎么实现：

要判断点击来自鼠标、触控板还是触摸屏，我们可以利用浏览器提供的事件属性：

• Pointer Events 是现在比较推荐的方案，它的pointerType属性直接告诉你输入类型：mouse（鼠标/部分触控板）、touch（触摸屏/触控板）、pen（手写笔）。
• 另外，event.sourceCapabilities也能帮上忙，比如e.sourceCapabilities.firesTouchEvents返回true的话，基本可以确定是触控类设备（触摸屏或触控板）。

这部分要分场景处理，不同设备的事件属性不一样：

1. 鼠标滚轮中键点击 #

这个最简单，普通的click或者mousedown事件里，event.button的值为1（或者event.which为2），就代表是中键（滚轮键）点击。比如：

document.addEventListener('mousedown', (e) => {
  if (e.button === 1) {
    console.log('这是鼠标滚轮中键的点击');
  }
});

2. 触控板的重压点击（Force Touch） #

这个属于触控板的特殊操作，不同浏览器的属性略有差异：

• 标准的PointerEvent.force属性：范围是0到1，0代表无压力，1是最大压力，一般超过0.5就可以判定为重压。
• Safari等WebKit内核浏览器会用webkitForce，Firefox用mozForce。
• 还可以监听专门的事件，比如webkitmouseforcewillbegin（重压即将触发）、webkitmouseforcedown（重压触发）。

3. 区分普通左键和触控板轻击/重压 #

结合上面的设备判断和压力属性，就能区分开：

document.addEventListener('pointerdown', (e) => {
  let clickDetail = '';
  
  // 判断按键
  if (e.button === 0) {
    // 先看是不是触控板重压
    const force = e.force || e.webkitForce || e.mozForce;
    if (force && force > 0.5) {
      clickDetail = '触控板重压点击';
    } else {
      // 再判断设备
      if (e.pointerType === 'touch') {
        clickDetail = '触控板轻击';
      } else if (e.pointerType === 'mouse') {
        clickDetail = '普通鼠标左键点击';
      }
    }
  } else if (e.button === 1) {
    clickDetail = '鼠标滚轮中键/触控板模拟中键点击';
  }

  console.log('当前点击：', clickDetail);
});

• 有些触控板会把自身的操作映射成鼠标事件，比如触控板的中键点击和鼠标滚轮中键的button值一样，这时候很难100%区分是鼠标还是触控板，只能结合设备类型做大致判断。
• 压力属性的兼容性不算完美，比如Windows系统的触控板可能不会返回force值，所以要做好降级处理。
• 不同设备的压力阈值可能不一样，你可以根据实际测试调整那个0.5的数值。

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