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

V2EX = way to explore

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

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

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

RT
javascript 不用定时器能否判断出单击和双击事件，想了很久都需要操作到时间有关的东西

JavaScript

单击

双击

定时

14 条回复 • 2019-06-15 20:06:04 +08:00

cydysm

2019-06-14 20:52:17 +08:00 via iPhone

你是说防抖？

xiaopc

2019-06-14 21:04:35 +08:00 via Android

ondblclick event?

chord

2019-06-14 21:07:08 +08:00

@xiaopc 是的，onclick 和 ondblclick 事件，不通过延时器单击事件和双击事件共存

chord

2019-06-14 21:08:18 +08:00

@cydysm 是的，不用到延时器

chord

2019-06-14 21:10:16 +08:00

也不能用到任何时间有关的。。。这个题目实在想不出解决方案

xiaopc

2019-06-14 21:14:38 +08:00 via Android

@chord 好像真的不行
jQuery 的文档里就提到不建议同时加这两个事件，因为不同系统的 timeout 不好控制

xiangyuecn

2019-06-14 21:21:39 +08:00

怎么会想到用定时器？不应该第一个想到：记录每次单击的时间，然后判断两次单击间的时间间隔么？

分享一下我的理解：

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

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

同理，“长按” 操作也可以这样处理

ETiV

2019-06-14 21:48:15 +08:00

window.requestAnimationFrame

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

数帧数就好了……严格来说跟时间无关…

chord

2019-06-14 22:49:51 +08:00

@xiangyuecn 意思就是不记录时间呢？哈哈哈

Chingim

2019-06-14 23:36:01 +08:00 via Android

单击和双击的区别是什么？不就是时间吗？

sudoer

2019-06-15 00:28:43 +08:00

@ETiV 请问具体怎么实现？ requestAnimationFrame 是将事件能跑到 60 帧去。。。想不来怎么做能判断单双击

ETiV

2019-06-15 07:27:09 +08:00 via iPhone

@sudoer 任何跑得起来的大系统都是个巨大循环，最外层都是 while true，用 reqAni 也是同理

然后基本就是通过全局状态，记录某一次单击的 frameId、判断再次单击时的新 frameId、对比两个 id 的差值，差得比较近的，模拟触发双击

crs0910

2019-06-15 16:36:23 +08:00

click 事件弄个 css 遮罩？

jiejiss

2019-06-15 20:06:04 +08:00

防抖都是在时间上定义的（否则何来“抖”？）
不让用时间的话，只好想办法弄来时间了
比如楼上提到的 requestAnimationFrame
或者是用没被封的 API 例如 performance.now
再或者你给某个指定的 server url 发 request，让 server sleep 1000ms 再发送应答