hammer.js – 多点触摸手势库

古城微笑少年丶 2022-01-14 18:39 254阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

[hammer.js][] 是一个多点触摸手势库，能够**为网页加入Tap、Double Tap、Swipe、Hold、Pinch、Drag等多点触摸事件**，免去自己监听底层touchstart、touchmove、touchend事件并且写一大堆判断逻辑的痛苦。

[![hammer.js][hammer.js 1]][hammer.js_hammer.js 1]

[hammer.js][] 不但支持触摸屏设备的浏览器，在桌面浏览器上，也能将鼠标的点击当做触摸，方便开发人员在桌面浏览器上调试。（[JS仔][JS]在自己的[随手背][Link 1]项目里面也用了[hammer.js][]，真心好用）

### 使用方法 ###

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div>
       1 
     </div> 
     <div>
       2 
     </div> 
     <div>
       3 
     </div> 
     <div>
       4 
     </div> 
     <div>
       5 
     </div> 
     <div>
       6 
     </div> 
     <div>
       7 
     </div> 
     <div>
       8 
     </div> 
     <div>
       9 
     </div> 
     <div>
       10 
     </div> 
     <div>
       11 
     </div> 
     <div>
       12 
     </div> 
     <div>
       13 
     </div> 
     <div>
       14 
     </div> 
     <div>
       15 
     </div> 
     <div>
       16 
     </div> 
     <div>
       17 
     </div> 
     <div>
       18 
     </div> 
     <div>
       19 
     </div> 
     <div>
       20 
     </div> 
    </div> </td> 
   <td> 
    <div> 
     <div>
       &lt;script src = "http://eightmedia.github.com/hammer.js/hammer.js" &gt; &lt;/script&gt; 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div>
       // 先要对监听的DOM进行一些初始化 
     </div> 
     <div>
       var hammer = new Hammer ( document . getElementById ( "container" ) ) ; 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div>
       // 然后加入相应的回调函数即可 
     </div> 
     <div>
       hammer . ondragstart = function ( ev ) {  } ; &nbsp;&nbsp; // 开始拖动 
     </div> 
     <div>
       hammer . ondrag = function ( ev ) {  } ; // 拖动中 
     </div> 
     <div>
       hammer . ondragend = function ( ev ) {  } ; // 拖动结束 
     </div> 
     <div>
       hammer . onswipe = function ( ev ) {  } ; // 滑动 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div>
       hammer . ontap = function ( ev ) {  } ; // 单击 
     </div> 
     <div>
       hammer . ondoubletap = function ( ev ) {  } ; //双击 
     </div> 
     <div>
       hammer . onhold = function ( ev ) {  } ; // 长按 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div>
       hammer . ontransformstart = function ( ev ) {  } ; // 双指收张开始 
     </div> 
     <div>
       hammer . ontransform = function ( ev ) {  } ; // 双指收张中 
     </div> 
     <div>
       hammer . ontransformend = function ( ev ) {  } ; // 双指收张结束 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div>
       hammer . onrelease = function ( ev ) {  } ; // 手指离开屏幕 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

还支持jQuery插件的形式调用

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div>
       1 
     </div> 
     <div>
       2 
     </div> 
     <div>
       3 
     </div> 
     <div>
       4 
     </div> 
     <div>
       5 
     </div> 
     <div>
       6 
     </div> 
     <div>
       7 
     </div> 
     <div>
       8 
     </div> 
     <div>
       9 
     </div> 
    </div> </td> 
   <td> 
    <div> 
     <div>
       &lt;script src = "http://eightmedia.github.com/hammer.js/jquery.hammer.js" &gt; &lt;/script&gt; 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div>
       $ ( "#element" ) 
     </div> 
     <div>
       &nbsp;&nbsp; . hammer ( {  
     </div> 
     <div>
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // 对DOM进行一些初始化，这里可以加入一些参数 
     </div> 
     <div>
       &nbsp;&nbsp; } ) 
     </div> 
     <div>
       &nbsp;&nbsp; . bind ( "tap" , function ( ev ) {  
     </div> 
     <div>
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console . log ( ev ) ; 
     </div> 
     <div>
       &nbsp;&nbsp; } ) ; 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

> 官网地址：[http://eightmedia.github.com/hammer.js/][hammer.js] （带演示）  
> 源码地址：[https://github.com/EightMedia/hammer.js][https_github.com_EightMedia_hammer.js]  
> 文件大小： 23K（源码）、6K（minified）

转载于:https://my.oschina.net/zhepama/blog/265025

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220114/87704c77b5a9460a9b181e6aef90298c.png
[hammer.js]: http://eightmedia.github.com/hammer.js/
[hammer.js 1]: http://static.oschina.net/uploads/img/201405/15012639_n2HA.png
[hammer.js_hammer.js 1]: http://jszai.com/wp-content/uploads/2012/10/2012-10-25_094636.png
[JS]: http://jszai.com/
[Link 1]: http://suishoubei.com/
[https_github.com_EightMedia_hammer.js]: https://github.com/EightMedia/hammer.js