其他分享
首页 > 其他分享> > hammer.js – 多点触摸手势库

hammer.js – 多点触摸手势库

作者:互联网

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

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

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

使用方法

 

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

还支持jQuery插件的形式调用

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

 

官网地址:http://eightmedia.github.com/hammer.js/  (带演示)
源码地址:https://github.com/EightMedia/hammer.js
文件大小: 23K(源码)、6K(minified)

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

标签:function,收张,触摸,js,ev,hammer
来源: https://blog.csdn.net/weixin_34384557/article/details/91927351