先上链接——《工作总会一件件件件件做完的》。在意符最近的这篇推文中，我们首次在公众号中使用<dblclick>交互指令，实现了双击操作事件。
dblclick & click
<dblclick>是 HTML 中的一种交互指令，表示用户在某个元素上快速连续点击两次。该事件与开发者们常用的<click>事件类似，但要求两次点击必须发生在一定的时间窗口内（通常为 300-500 毫秒之间），且点击的位置相同。
经测试，当用户双击某个元素时，事件的触发顺序如下：
·第一次点击会立即触发<click>事件；
·如果在双击时间窗口内发生第二次点击，则会触发第二个<click>事件；
·随后，浏览器会触发<dblclick>事件
因此，在发生双击时，浏览器实际上会处理两次<click>事件和一次<dblclick>事件。开发者需要注意这种顺序，以确保不会造成事件的误处理或冲突。
多种交互指令的组合设计
在上篇推文中，我们介绍了 mouseover & mouseout 在移动端的应用，而本文则将多种交互指令组合使用，复刻了用户在操作文件夹时的各类交互事件。
通过下方演示可以看到：用户单击选中文件夹（<mouseover>），单击其他区域取消选中状态（<mouseout>），双击打开文件夹（<dblclick>），单击关闭按钮关闭文件夹（<click>）↓
值得注意的是，以往 SVG 开发中，我们常用 touchstart & click 实现可循环触发的弹窗效果，但由于 touchstart 的触摸特性，通常会存在误触问题，且无法在电脑端响应。
本文采用的<dblclick>&<click>组合方案，既可以规避误触风险，又能在电脑端完美适配 ↓
<animate begin="click" attributeName="height" fill="freeze" calcMode="spline" keySplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0" keyTimes="0;0.00001;1" values="3000;3000;3000" dur="1000s"></animate><animate begin="dblclick" attributeName="height" fill="freeze" calcMode="spline" keySplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0" keyTimes="0;0.00001;1" values="1;1;1" dur="1000s"></animate>
dblclick 的移动端交互设计
双击事件在电脑端应用广泛，例如双击打开文件夹、双击文字快速选择词语。但在移动端双击行为并不常用，大部分的移动端交互设计更倾向于使用单击、滑动、长按等手势。因此在使用<dblclick>时，需要设计用户学习成本更低的交互场景。
例如本文介绍的拟态文件夹互动，就借助了用户十分熟悉的「双击打开文件夹」的操作场景↓
在意符的一篇公司介绍推文中，也通过双击事件，模拟了现实世界中的敲门动作↓
移动端用户熟悉的双击行为还包括「双击放大/缩小图片」、「双击播放/暂停视频」等，同样也可以作为双击事件交互设计的推荐场景。
小结
如果你有想要实现的微信互动玩法和交互创意，欢迎添加我的微信交流。预祝大家元旦快乐！
