Web里的人机交互之鼠标篇

不知道为何计算机用户大部分喜欢鼠标点击，最近想掰弄一下可视化，放大平移选中拖动一下子交杂在一起，就晕了。

网上竟然还找不到比较好用的库，那就自己动手丰衣足食吧。

实现的目标是：

支持鼠标长按键（比如按住一个圆一秒表示选中）；

支持鼠标手势，再加一下模式识别的库都可以自己弄手写板了；

支持手机上加载页面时将手指事件转化为鼠标时事件；

支持手机上几个指头抓起或撑开的动作（比如缩小或放大一个区域）；

支持单击，双击乃至多次点击；

支持鼠标拖拽后事件；

先上repo吧：https://github.com/dna2github/petalJS/tree/master/visualization

modules.js就是自己写了个动态加载javascript文件的脚本，这样以后有ACL控制好加载不同js。原理是：用jQuery创建一个<script>元素插入页面里，然后运行里面自带的init函数。

interactions.js看代码就好，index.html是一个小例子，有些小点在这里记录一下：

1 互交会注册一些事件到各种基本鼠标事件上，比如click, mousemove, mousedown等，然后所有的新事件在此上层封装。也就是interactions.js暴露出来的单击双击都是和浏览器原带的事件层不在同一个次元了。

2 互交代码中，会使用定时器判断是否触发一个事件，比如长按一个元素2s以后触发hold事件。当然，hold时间长短可以使用时通过interaction.config().hold.last动态调整。

3 gesture有两种模式，relative模式是判断鼠标和上一次位置的差距，大于阀值就记录一个新的坐标；absolute模式是将元素划分为方形小格，鼠标从一格到另一格会被记录为新坐标。

4 手机多个手指抓去实现苹果的pad功能还是蛮有意思的，就是要注意浏览器里放x个手指在屏幕上抓是可以触发事件的，加一个手指也会触发事件，但是奇怪的是提起一个手指再抓就不触发事件了。