V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
yxcoder
V2EX  ›  JavaScript

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

  •  
  •   yxcoder · 2022-03-22 18:49:45 +08:00 · 3920 次点击
    这是一个创建于 970 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    8 条回复    2024-06-26 19:54:05 +08:00
    also24
        1
    also24  
       2022-03-22 19:08:38 +08:00
    前阵子看到的……

    yimity
        2
    yimity  
       2022-03-22 19:28:14 +08:00
    比较好奇,有什么需求需要区分这个?
    xy90321
        3
    xy90321  
       2022-03-23 00:47:19 +08:00 via iPhone
    chengyiqun
        4
    chengyiqun  
       2022-03-25 10:24:08 +08:00
    @xy90321 这个 event 应该是监听触屏的.
    我没用过 mac, 但是按照我的理解, 触摸板子本身是一个兼容的 ps/2 鼠标. 所以里面的事件才和鼠标的事件是一样的吧.
    这怎么区分?
    chengyiqun
        5
    chengyiqun  
       2022-03-25 10:27:32 +08:00
    @xy90321 至少在 windows 上, 触摸板是被识别成一个鼠标设备的. 就算支持手势, 手势本身也只是类似游戏鼠标的各种功能键侧键的封装而已, 手势只能用他们预定的格式, 一个手势相当于一个功能键
    yxcoder
        6
    yxcoder  
    OP
       2022-03-25 14:13:50 +08:00
    @also24
    @yimity
    @xy90321
    @chengyiqun

    结贴:
    分辨方法
    1.鼠标滚轮 -> e.wheelDeltaY === (e.deltaY * -3)
    yxcoder
        7
    yxcoder  
    OP
       2022-03-25 14:16:29 +08:00   ❤️ 1
    @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
        8
    yxcoder  
    OP
       143 天前
    刚看到有人收藏,更好用的办法是

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

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

    所以在刚开始滚动的时候记录一下,譬如 A ,在接下来的一段时间,譬如 3s 内,只要出现滚动值与初始值不一致,则判断为触摸板,否则判断为鼠标。注意,这个判断是个连续的过程。
    换个思路,可以假设刚开始的时候就认为用户用的鼠标,在持续的滚动中只要出现与初始值不一样的滚动值,就立马改判触摸板,并且一个极短的时间内譬如 100ms 之内不触发事件,就结束此次判断,下次触发时再判断
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2762 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 08:42 · PVG 16:42 · LAX 00:42 · JFK 03:42
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.