现在大部分流量都在手机上，用户的习惯也早就被各种 App 养出来了：图片要用两根手指捏着缩放，列表要按住往两边滑，卡片要能拖来拖去。可浏览器原生只给了最基础的触摸事件，滑动手势、双指缩放、惯性拖拽这些都要自己算，不同设备、不同浏览器还时不时闹别扭。这次整理了 3 款开源免费、可商用的网页触摸手势库，把这些交互封装成简单的事件，能省下大量调试时间。
三款库分别管什么
Hammer.js 是最流行的一款手势库，把手势识别成点击、双击、滑动、拖拽、缩放、旋转、长按几个事件，一行监听就能用，内部帮你处理好了不同设备的兼容问题，适合做滑动切换、双指缩放、长按菜单这类常见交互。Interact.js 专注拖、放、缩放、旋转和吸附，鼠标、触摸、触控笔统一处理，还能限制拖动范围、加惯性、把元素吸附到网格上，适合可视化编辑器、看板拖拽、图片裁剪框这种需要精确操控的场景。ZingTouch 主打手势识别引擎，除了自带的手势，还能按自己的轨迹需求自定义注册手势，适合要做特殊交互的项目。
移动端适配这块要注意什么
手势交互最考验的其实是适配。桌面端用鼠标点，三款差别不大，一放到手机上，双指缩放跟不跟手、滑到边缘会不会卡死、快速切换会不会白屏，差距立刻就出来了。另外有个容易被忽略的点，就是别让页面的滚动和手势库打架，比如做上下滑动切换时，要记得阻止默认滚动，否则会出现滑一半页面跟着动的情况。还有个常见坑是同一个元素被多套手势方案重复绑定，事件会互相干扰，引入前先确认项目里有没有现成的拖拽方案。
包内容和用法
压缩包按库名分成了三个目录，每个目录里放构建产物和说明文档。三款都是纯 JS、不依赖框架，用 script 标签直接引入就能用，不需要构建工具，也不用装任何依赖。它们可以同时使用，也可以按项目需要只选一款，互不影响。每个目录都附带了许可文件，写了基础用法和常用参数，拿到手照着改就行。三款加起来不过几百 KB，对项目负担不大，建议先存一份进自己的工具箱。
手势交互属于典型的「用户觉得理所当然、开发者掉一层皮」的活，做好了没人夸，做差了滑不动、缩放飘，用户用着别扭就走。与其每次都重新踩一遍触摸事件的坑，不如挑一款成熟库收进工具箱。这三款都是社区验证过的方案，稳定性和文档质量都不错。全部是 MIT 协议，可免费商用、修改和再分发，保留各自的许可文件即可。后面还会继续整理前端开发常用的组件合集，需要的可以先收藏。
暂无评论内容