React组件连续双击两次无响应？问题排查与疑问

我在React函数式组件中写了这段代码：

const example = () => (
    <div onDoubleClick={() => { console.log('fired'); }}>
      test element
    </div>
);

单次双击能正常打印fired，但连续快速双击两次时，第二次双击无法触发事件，必须等一小段时间后再双击才能触发第二次。这是不是有内置的速率限制？

另外我发现MDN文档里dblclick事件的交互示例也有同样问题：在示例过渡期间双击，输入不会被识别直接被忽略。这是浏览器层面的机制吗？有没有相关文档说明？

这确实是浏览器层面的内置机制，和React无关。

• 浏览器识别dblclick事件时，会依赖一个系统级的双击时间间隔阈值（多数浏览器默认是300ms左右，不同浏览器/系统可能略有调整）。当第一次双击触发后，浏览器会启动一个计时窗口，在这个窗口内的点击会被用来判断是否属于下一次双击的组成部分，但如果两次双击的间隔过短，第二次双击的两次点击会被浏览器判定为第一次双击的后续操作，无法形成有效的第二次dblclick事件。
• 你看到MDN示例的问题也是同样的原因——浏览器的dblclick事件识别逻辑是全局统一的，所有页面的dblclick处理都会遵循这个阈值规则。
• 关于文档说明：这个行为属于W3C UI Events规范的范畴，规范里明确提到，用户代理（浏览器）会根据系统设置的双击时间间隔来识别dblclick事件，只有当两次点击的间隔超过这个阈值时，才会被视为新的双击触发条件。

内容的提问来源于stack exchange，提问作者temporary_user_name