可行,event.timeStamp返回相对于页面加载完成的时间戳(毫秒),同页面内两次点击的差值即准确间隔;需注意IE8-不支持,精度通常毫秒级,不可与Date.now()混用。

直接用 event.timeStamp 计算两次点击的时间间隔是可行的,但要注意它返回的是**相对于页面加载完成(navigationStart)的时间戳(毫秒)**,不是绝对时间,也不等于 Date.now()。只要两次事件都来自同一页面上下文,差值就是准确的毫秒间隔。
获取并保存第一次点击的时间戳
监听点击事件,在第一次触发时记录 event.timeStamp,并存到变量或闭包中:
let firstClickTime = null;
<p>document.addEventListener('click', function(event) {
if (firstClickTime === null) {
firstClickTime = event.timeStamp;
console.log('第一次点击:', firstClickTime);
}
});第二次点击时计算时间差
在第二次点击时读取当前 event.timeStamp,减去之前保存的值即可:
document.addEventListener('click', function(event) {
if (firstClickTime === null) {
firstClickTime = event.timeStamp;
} else {
const interval = event.timeStamp - firstClickTime;
console.log('两次点击间隔:', interval, 'ms');
// 重置以便下一轮测量(可选)
firstClickTime = null;
}
});注意兼容性与精度细节
-
event.timeStamp在所有现代浏览器中都支持,但 IE 8 及更早版本不支持(返回 0);如需兼容旧环境,可用Date.now()替代 - 该值精度通常为毫秒级,部分浏览器(如 Chrome)在高精度定时器启用时可达微秒级,但实际点击操作本身存在人类反应延迟(~100–300ms),无需过度关注亚毫秒差异
- 不要混用
event.timeStamp和Date.now()直接相减——两者基准不同,结果无意义
扩展:连续多次点击的间隔检测
若需检测双击、三连击等,建议用 setTimeout 控制窗口期,而非只依赖两次时间差:
let clickTimes = [];
<p>document.addEventListener('click', function(event) {
const now = event.timeStamp;
clickTimes.push(now);</p><p>// 只保留最近 1 秒内的点击
const cutoff = now - 1000;
clickTimes = clickTimes.filter(t => t > cutoff);</p><p>if (clickTimes.length >= 2) {
const lastTwo = clickTimes.slice(-2);
const diff = lastTwo[1] - lastTwo[0];
if (diff < 300) {
console.log('检测到双击(间隔', diff, 'ms)');
}
}
});

















