hammer.js手势库使用

用户1141560

发布于 2017-12-26 11:26:25

2.4K0

发布于 2017-12-26 11:26:25

hammer.js是一款移动端手势库组件，支持pan（拖动）、swipe（滑动）、tap（轻触）、press（按压，即长按）、doubletap（双击）等很多手势操作，提供比较完善的事件监听机制，但是使用的时候遇到很多事件官方默认没有开启，比如想要同时使用单击、双击、按压事件，必须设置如下：

var hammer = new Hammer.Manager(document.getElementById("swiper-wrapper"));
hammer.add( new Hammer.Tap({ event: 'doubletap', taps: 2 }) );
hammer.add( new Hammer.Tap({ event: 'singletap' }) );
hammer.add( new Hammer.Press({ event: 'press' }) );
hammer.get('doubletap').recognizeWith('singletap');
hammer.get('singletap').requireFailure('doubletap');
hammer.get('press').set({enable: true });
hammer.on('doubletap', function(ev) {  //双击
     deviceone.print(ev.type);
}).on('singletap', function(ev) { //单击
     //do_App.closePage();
     deviceone.print(ev.type);
}).on("press",function(ev){   //长按
     //do_Page.fire("showTool",{"index":index,"url":images[index].source,"isshow": true});
     deviceone.print(ev.type);
});

ev是事件对象，包含很多属性，具体点击官网查看。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2016-12-23 ，如有侵权请联系 cloudcommunity@tencent.com 删除

swipe