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

javascript 不用定时器能否判断出单击和双击事件

  •  
  •   chord · 2019-06-14 20:31:27 +08:00 · 4102 次点击
    这是一个创建于 1749 天前的主题,其中的信息可能已经有所发展或是发生改变。
    RT
    javascript 不用定时器能否判断出单击和双击事件,想了很久都需要操作到时间有关的东西
    14 条回复    2019-06-15 20:06:04 +08:00
    cydysm
        1
    cydysm  
       2019-06-14 20:52:17 +08:00 via iPhone
    你是说防抖?
    xiaopc
        2
    xiaopc  
       2019-06-14 21:04:35 +08:00 via Android
    ondblclick event?
    chord
        3
    chord  
    OP
       2019-06-14 21:07:08 +08:00
    @xiaopc 是的,onclick 和 ondblclick 事件,不通过延时器单击事件和双击事件共存
    chord
        4
    chord  
    OP
       2019-06-14 21:08:18 +08:00
    @cydysm 是的,不用到延时器
    chord
        5
    chord  
    OP
       2019-06-14 21:10:16 +08:00
    也不能用到任何时间有关的。。。这个题目实在想不出解决方案
    xiaopc
        6
    xiaopc  
       2019-06-14 21:14:38 +08:00 via Android
    @chord 好像真的不行
    jQuery 的文档里就提到不建议同时加这两个事件,因为不同系统的 timeout 不好控制
    xiangyuecn
        7
    xiangyuecn  
       2019-06-14 21:21:39 +08:00
    怎么会想到用定时器?不应该第一个想到:记录每次单击的时间,然后判断两次单击间的时间间隔么?

    分享一下我的理解:

    双击===同一位置短时间内的两次单击。记录每次单击的时间,如果这次单击距离上次单击的间隔很短,并且点击坐标在同一位置,说明是双击

    这里所说的 单击===同一位置按下和弹起,并且没有发生移动行为

    同理,“长按” 操作 也可以这样处理
    ETiV
        8
    ETiV  
       2019-06-14 21:48:15 +08:00
    window.requestAnimationFrame

    https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame

    数帧数就好了……严格来说跟时间无关…
    chord
        9
    chord  
    OP
       2019-06-14 22:49:51 +08:00
    @xiangyuecn 意思就是不记录时间呢?哈哈哈
    Chingim
        10
    Chingim  
       2019-06-14 23:36:01 +08:00 via Android
    单击和双击的区别是什么?不就是时间吗?
    sudoer
        11
    sudoer  
       2019-06-15 00:28:43 +08:00
    @ETiV 请问具体怎么实现? requestAnimationFrame 是将事件能跑到 60 帧去。。。想不来怎么做能判断单双击
    ETiV
        12
    ETiV  
       2019-06-15 07:27:09 +08:00 via iPhone
    @sudoer 任何跑得起来的大系统都是个巨大循环,最外层都是 while true,用 reqAni 也是同理

    然后基本就是通过全局状态,记录某一次单击的 frameId、判断再次单击时的新 frameId、对比两个 id 的差值,差得比较近的,模拟触发双击
    crs0910
        13
    crs0910  
       2019-06-15 16:36:23 +08:00
    click 事件弄个 css 遮罩?
    jiejiss
        14
    jiejiss  
       2019-06-15 20:06:04 +08:00
    防抖都是在时间上定义的(否则何来“抖”?)
    不让用时间的话,只好想办法弄来时间了
    比如楼上提到的 requestAnimationFrame
    或者是用没被封的 API 例如 performance.now
    再或者你给某个指定的 server url 发 request,让 server sleep 1000ms 再发送应答
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2750 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 12:13 · PVG 20:13 · LAX 05:13 · JFK 08:13
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.