hammerJs 快速使用---入门教程

hammerJs 是一个js的移动端手势监控插件,它可以实现对移动端的点击、滑动、拖动和长按等手势监控。


hammer 初始化:

基本的文档结构如所示:

<div id='hammerTest'>
   ……
</div>
创建手势对象:

var hammerTest = new Hammer(document.getElementById("hammerTest"));
为手势对象绑定事件:

hammerTest.on("pan", function (el) {
   console.log('这里是手势响应事件');
});
hammer支持的手势事件主要为以下的几种:

  • pan(滑动事件)

事件触发:当手指按下,并向指定方向滑动时触发(指定方向可以是:panleft、panright、panup、pandown)

  • tap(点击事件)
事件触发:手指快速点击事件,该事件可以用于替换 ‘click’ 事件,移动端 ‘click’ 容易与 ‘press’ 长按事件混淆,所以hammer提供                 了 ‘tap’ 事件,在hammer框架内,按压时间低于 ‘300ms’ 的视为点击事件 ‘tap’ ,高于 ‘300ms’ 视为长按事件 ‘press’。 

  • press(长按事件)
事件触发:手机按压保持 ‘300ms’ 以上触发

  • pinch(缩放事件)
事件触发:当两个手指或以上的多个手指,在屏幕上相互靠近或是远离是触发。‘pinch’事件默认是关闭的,如果需要使用的话    请执行下列代码片段。

	hammerTest.get('pinch').set({ enable: true });

  • swipe(快速滑动事件)
事件触发:当手指快速向一个指定的方向滑动足够的距离触发。指定方向: swipeleft、swiperight、swipeup、swipedown

  • rotate(旋转事件)
事件触发:多个手指在按压平时的状态下旋转,旋转事件默认为关闭,使用时请执行下列代码段。

	hammerTest.get('pinch').set({ enable: true });


知道这些你就可以快速的使用hammer插件来实现你的手势监控了。

如想更深入的了解hammer的实现以及使用技巧,可关注博主。

另一种方式,你可以前往hammer官网查看官方英文文档:http://hammerjs.github.io/recognizer-rotate/

  • 2
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值