js 如何分辨 mac 用户的触控板事件与鼠标滚动事件

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 966 天前的主题，其中的信息可能已经有所发展或是发生改变。

如题 mac 用户触控板，双指同向滑动（同时向上或者向下），双指反向滑动（放大与缩小功能），鼠标滚动，都使用的是 WheelEvent 事件，type 都是 wheel ，做交互的时候需要区分这三种情况，有啥好用稳定的方法吗？

Mac

滑动

滚动

鼠标

8 条回复 • 2024-06-26 19:54:05 +08:00

also24

2022-03-22 19:08:38 +08:00

前阵子看到的……

yimity

2022-03-22 19:28:14 +08:00

比较好奇，有什么需求需要区分这个？

xy90321

2022-03-23 00:47:19 +08:00 via iPhone

https://developer.mozilla.org/en-US/docs/Web/API/Touch_events

试试？

chengyiqun

2022-03-25 10:24:08 +08:00

@xy90321 这个 event 应该是监听触屏的.
我没用过 mac, 但是按照我的理解, 触摸板子本身是一个兼容的 ps/2 鼠标. 所以里面的事件才和鼠标的事件是一样的吧.
这怎么区分?

chengyiqun

2022-03-25 10:27:32 +08:00

@xy90321 至少在 windows 上, 触摸板是被识别成一个鼠标设备的. 就算支持手势, 手势本身也只是类似游戏鼠标的各种功能键侧键的封装而已, 手势只能用他们预定的格式, 一个手势相当于一个功能键

yxcoder

2022-03-25 14:13:50 +08:00

@also24
@yimity
@xy90321
@chengyiqun

结贴：
分辨方法
1.鼠标滚轮 -> e.wheelDeltaY === (e.deltaY * -3)

yxcoder

2022-03-25 14:16:29 +08:00

@yxcoder 没输入完就发出去了.....

```
if (e.wheelDeltaY === (e.deltaY * -3)){
鼠标滚动
} else if (ctrlKey === true){
反向滑动
} else {
同向滑动
}
```

https://stackoverflow.com/questions/10744645/detect-touchpad-vs-mouse-in-javascript/62415754#62415754

yxcoder

139 天前

刚看到有人收藏，更好用的办法是

鼠标滚动在一段时间内是一个固定的值，譬如 3 or -3

但是由于人的操作不稳定，在一段时间内是一个变化的值，而且触发频率非常高

所以在刚开始滚动的时候记录一下，譬如 A ，在接下来的一段时间，譬如 3s 内，只要出现滚动值与初始值不一致，则判断为触摸板，否则判断为鼠标。注意，这个判断是个连续的过程。
换个思路，可以假设刚开始的时候就认为用户用的鼠标，在持续的滚动中只要出现与初始值不一样的滚动值，就立马改判触摸板，并且一个极短的时间内譬如 100ms 之内不触发事件，就结束此次判断，下次触发时再判断